解决iframe显示高度自适应问题

2019独角兽企业重金招聘Python工程师标准>>>

1.解决iframe显示高度自适应问题

2.解决在chrome下ifame跳转高度不能减少

3.解决IE Chrome兼容问题（其它浏览器未测试）

HTML:

<iframe frameborder="0" scrolling="no"  id="iframe" οnlοad="reinitIframeChrome(this)" onreadystatechange="reinitIframeIE(this)">

onreadystatechange这个方法只在IE下适用，Chrome下不会被调用

Javascript:

//iframe高度自适应
function reinitIframeIE(frame) {
if(frame.readyState=="complete"){//待页面加载完成后调整高度
changeHeight();
}
}
function reinitIframeChrome(frame) {
if(document.readyState!="loading"){//待页面加载完成后调整高度
changeHeight();
}
}
function changeHeight(){
var iframeid = document.getElementById("iframe"); // iframe id
iframeid.height = "642px";// 先给一个够小的初值,然后再长高.
iframeid.style.height ="642px";//css也要行被缩小，否则跳转时滚轴长度不会变
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument
&& iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
iframeid.style.height = iframeid.height+"px";//只有调整css的height后，才被在外围窗口显示滚轴
}

转载于:https://my.oschina.net/u/993228/blog/110481