iframe高度自适应

Posted 2020-11-10 dd_227

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面

为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe高度自适应。

 

js代码

function setIframeHeight(iframe) {
　　if (iframe) {
　　　　/*
　　　　　　contentDocument是获得iframe子窗口的document对象，兼容Firefox和ie8+
　　　　　　contentWindow是获得子窗口的window对象，兼容大部分浏览器
　　　　*/

　　　　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‘));
};

 

html

<iframe id="iframe-center" scrolling="yes" rameborder="0" src="center.html" name="centerPage"class="pull-left" onload="setIframeHeight(this)"></iframe>

 

详情参考：http://caibaojian.com/iframe-adjust-content-height.html?tdsourcetag=s_pctim_aiomsg