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

一世执手 提交于 2019-11-27 14:31:55

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

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

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

HTML:

<iframe frameborder="0" scrolling="no"  id="iframe" onload="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后,才被在外围窗口显示滚轴
}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!