总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。

页面html节点上要有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
            frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

调用
<script type="text/javascript">
        startInit(‘mainFrame‘, 560);
</script>

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false;
var isFireFox = false;
var isChrome = false;
var isSafari = false;
var isIE = false;
var iframeTime;
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false)
            bHeight = iframe.contentWindow.document.body.scrollHeight;

        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
        else if (isIE == false && isOpera == false)
            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        else
            bHeight += 3;
        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        isIE = true;
    reinitIframe(iframeId, minHeight);
    if (iframeTime != null)
        clearInterval(iframeTime)
    iframeTime = window.setInterval("reinitIframe(‘" + iframeId + "‘," + minHeight + ")", 100);
}

测试发现兼容浏览器ie6-11、chrome+、firefox、opera、Safari、傲游云浏览器、360浏览器，兼容性更好，其他未测试，如发现高度不能自适应，请留言给我。

参考http://www.kuqin.com/webpagedesign/20080516/8536.html

更新日志
2015-1-15 更新兼容IE11自动高度

2015-4-15 优化判断性能，同时修复iframe每加载一次，都会同时启用一个新的window.setInterval，导致多个window.setInterval同时运行。

转自：http://www.cnblogs.com/slyzly/articles/2422737.html

时间： 2024-10-08 14:30:57

总结iframe高度自适应，自适应子页面高度的相关文章

转：iframe加载的子页面里面获取父级元素窗口以及元素的高度

iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<

iframe高度自适应子页面高度使用onload属性

<!DOCTYPE html> <html> <head> <title>测试</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> </head> <body id

父页面iframe高度自动适应子页面iframe高度

//iframe自适应高度 function getHeight(id, name) { document.documentElement.scrollTop = 0; var ifm = document.getElementById(id); var subWeb = document.frames ? document.frames[name].document : ifm.contentDocument; if (ifm != null && subWeb != null) { i

iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）

父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;"> <iframe style="height:182px; width:300px;" src="1.html"></iframe> </div> js: function closeIframe(){ $("#wi

父div高度不能根据子div高度自动变化的解决方案

1 <div id="parent"> 2 <div id="content"> </div> 3 </div> 当content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展.解决方案如下: 1 <div id="parent"> 2 <div id="content"></div> 3 <

iframe传参调用子页面方法报错

contentWindow.xxx is not a function.iframe的时候还没有加载完成导致报错 var frame = document.getElementById("map"); frame.onload = function(){ frame.contentWindow.getMobile() }; https://blog.csdn.net/weixin_42596278/article/details/90606924 原文地址:https://www.cn

iframe高度宽度自适应（转）

http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应完全跨域的iframe高度自适应同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度. 但跨域的情况则不允许对子页面或父页面的文档进行访问(返回und

IE8下IFrame 和子页面的通信

业务中遇到这种场景,我们的业务嵌入别的系统中使用,系统采用Iframe调用我们的业务,在使用过程中主要遇到两个问题: 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 2.子页面不同获取外部scrollTop的问题. 这两个问题其实都可以说是跨域通信的问题. 这两个问题我们采用了不同不同的方案来解决. 1.子页面高度发生变化时外部的Iframe高度自适应的问题. 我们采用在外部系统中增加一个代理页面,这样的话这个代理页面就和外部系统处于同一个域中了,相当于我们在外部系统中安插了一个内

使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

<frameset rows="4,200,10,*,120" cols="*" framespacing="0" frameborder="no" border="1" > <frame src=""/> <frame src="<%=practiceInfoSrc %>" id="practiceInfo&quo