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