当前位置:首页 > 网站运维 > 正文内容

iframe高度自适应的一个方法

葱子3年前 (2017-09-20)网站运维241
点击这里给我发消息

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。 第一想到的就是使用iframe框架来实现。 有个问题就是,目标页面的高度是动态调整的,非固定的。 在网上搜索了下,找个一个不错的解决方法,使用js来实现,具体实现代码如下:

1、js代码:


<script>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')); };</script>  


2、html代码如下:

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>
以上代码参考这篇文章,这篇文章里同时提到了其他几个方法,感兴趣的可以看下。 http://caibaojian.com/iframe-adjust-content-height.html

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。