iframe 调用子页是能够自适应高度，兼容ie8,ie9,火狐等浏览器

Posted 2023-04-24

关于这个问题，在网上找了好长时间，还是没能解决这个问题，实在是头疼的很。哪位高手能路过并指点下，小妹感激不尽，拜托拜托，附上我所有的财富，虽不多但这代表我急切之心啊！！！！

参考技术A 　　您好！很高兴为您答疑！

　　在一个页面含有某个iframe，其id="myframe" name="myframe"，此时使用document.getElementById("myframe")取到的是iframe标签对象，通过该对象可以获取iframe的各个属性
<script type="text/javascript">
function SetCwinHeight(iframeObj)
if (document.getElementById)
if (iframeObj && !window.opera)
if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight)
　　iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
　　else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight)
　　iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
　　
　　
　　
　　
　　</script>
　　<iframe width="100%" name="frameContent" onload="SetCwinHeight(this)" frameborder="0" src="http://www.xxx.com"></iframe>
　　　　您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。 参考技术B <iframe src="子页" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

js里写上
<script type="text/javascript" language="javascript">
function iFrameHeight()
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null)
ifm.height = subWeb.body.scrollHeight;


</script> 参考技术C <iframe onload="javascript:this.height=Math.max(this.contentWindow.document.body.scrollHeight, contentWindow.document.documentElement.scrollHeight);"></iframe>

Iframe 高度自适应

 实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 （需要只有iframe出现滚动条）

刚开始以为是很小的问题一直没注意，但是经常页面比较高的只能显示一半，后来也在网上搜了很多解解办法，一直没真正解决，下面是我在网上搜到的方法：

        function iframeAutoFit(iframeObj) {
            setTimeout(function() { if (!iframeObj) return; iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight); }, 200)
        }

　　下面是我的Iframe

        <iframe id="MainIframe" onload="iframeAutoFit(this)" name="rightContent" src="@Url.Action("Content","Home")" class="main" frameborder="0" scrolling="no" style="min-height:1000px;"></iframe>

这样可以解决，但是有一个问题，刚加载进来时高度可以正确显示，但是嵌入内容的高度随点击变化（如：下拉菜单，左侧导航栏，上传显示图片等）Iframe高度不会自动适应，为了解决这个问题，我又去搜了一圈，包括在园子里看了一圈也没真正解决，后来仔细想想咱们这样写的是在Iframe加载的是改变的高度，可是我们的内容是在加载以后改变的，应该定一个计时器去随时监测我们的页面高度是否改变了！于是我把上面的方法改了下完美解决问题了。

        function iframeAutoFit(iframeObj) {
            setInterval(function () {
                if (!iframeObj) return;
                iframeObj.height = (iframeObj.Document ? iframeObj.Document.body.scrollHeight : iframeObj.contentDocument.body.offsetHeight);
            }, 200)
        }

　　虽然是个小问题，但是发现网上搜的方法都没解决我的问题，于是写出来分享给大家，不知道解决你的问题没有呢？