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

怼烎@ 2022-07-24 10:07 345阅读 0赞

在网上找了很多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>

![复制代码][copycode.gif]

var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false; 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 if (isIE == true && ! -[1, ] == false) { } //ie9+
            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; window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100); }

![复制代码][copycode.gif]

源引：http://www.cnblogs.com/slyzly/articles/2422737.html

[copycode.gif]: /images/20220722/def67287d76347d9924deb98931bd84d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe高度自适应

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe

- 日理万妓/ 2023年06月02日 14:00/ 0 赞/ 44 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 309 阅读

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

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 346 阅读

相关 iframe 高度设置、iframe 自适应高度方法总结

所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固

拼搏现实的明天。/ 2022年07月24日 10:06/ 0 赞/ 494 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 340 阅读

相关 iframe框架高度自适应

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

超、凢脫俗/ 2022年06月09日 13:08/ 0 赞/ 354 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 376 阅读

相关 iframe父页面自适应子页面的高度

我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而 [html5 postMessage解决跨域、跨窗口消息传递][html5 pos

系统管理员/ 2022年04月11日 12:22/ 0 赞/ 457 阅读

相关 iframe高度自适应

<iframe src="index.html" onload="this.height=this.contentWindow.document.body.scrol

心已赠人/ 2022年03月17日 16:28/ 0 赞/ 389 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 592 阅读