iframe自适应高度 iframe

本以为在前端道路上不会用到iframe,毕竟html5已经废弃了。但是项目中还是遇到了，于是各种百度开始啦

下面是我百度到的代码：

<iframe id="iframe"  scrolling="no" frameborder="0" style="width:540px;text-align: center;"  src="aaa.html?shop_id=26"></iframe>

var ifm = document.getElementById("iframe");
ifm.onload = function() {
var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight + 44;
alert(ifm.height)
}
}

然后在我写的时候这还没有完，因为iframe的高度和之前一样，并没有自适应，后来我找到了src中引用的页面 ，显式的获取页面文档高度 给body元素

document.body.offsetHeight

这样就可以啦..

但是 由于rc中引用的页面存在异步， 上面的方法需要放到ajax 成功的回调之后

由于本人的项目 那个页面有多个ajax封装的方法， 所以索性 更改代码：

var ifm = document.getElementById("iframe");
ifm.onload = function() {
var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
setTimeout(function() {
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight + 44;
alert(ifm.height)
}
}, 4000)
}

iframe嵌进去的页面是不可点击的，设置一下样式就可以

<style>
iframe{
pointer-events: none;
}
</style>

嗯 就这样，之后再优化

今天没事了 改了一下 把setTimeout改成了setInterval，代码如下：

var ifm = document.getElementById("iframe");
ifm.onload = function() {
var subWeb = document.frames ? document.frames["iframe"].document : ifm.contentDocument;
var heightArray = [];
var interval = setInterval(function() {

if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight + 44;
}

heightArray.push(ifm.height);

if(heightArray.length > 1) {
if(heightArray[heightArray.length-2] === heightArray[heightArray.length-1]) {
clearInterval(interval)
}
}

}, 1200)

}