本以为在前端道路上不会用到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)
}