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

本文链接:iframe高度自适应的一个方法

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:葱子博客,谢谢!^^


如果文章对您有帮助,欢迎微信扫一扫赞赏葱子! 点击链接加入群【个人站长创业互助群】
点赞 联系我

发表评论

电子邮件地址不会被公开。 必填项已用*标注

 
QQ在线咨询
售前咨询热线
售后咨询热线