iframe高度自适应的一个方法

付费服务

最近在写网页的时候,遇到一个问题,需要在某个页面下调用另外一个页面做内容展现。

第一想到的就是使用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

打赏

文章有用那就打赏一下呗

点击链接加入群【个人站长创业互助群】
点赞 联系我
 
QQ在线咨询
售前咨询热线
售后咨询热线