iframe 自适应高度的六种方法介绍
时间:2023-10-18 00:16:04
在实际使用iframe的过程中,会遇到iframe高度的问题,对于iframe 自适应高度一直是难点,因为既要考虑浏览器的兼容性,还要考虑同域、跨域的情况,下面就给大家介绍iframe 自适应高度的六种方法。
前言:
JS自适应高度其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹,对于用户体验和网站美观起着重要作用。·
如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求,当内容是未知或者是变化的时候,情况也各不一样。
iframe 自适应高度的六种方法介绍:
一、iframe内容未知,高度可预测
这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:·
01// document.domain = "caibaojian.com";
02function setIframeHeight(iframe) {
03if (iframe) {
04var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
05if (iframeWin.document.body) {
06iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
07}
08}
09};
10window.onload = function () {
11setIframeHeight(document.getElementById('external-frame'));
12};
复制代码
// document.domain = "caibaojian.com";function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};window.onload = function () {setIframeHeight(document.getElementById('external-frame'));};