Saber 酱的抱枕

Fly me to the moon

01/3
2018
学习

iframe自适应高度

iframe平时我们已经不怎么用了,但有些特殊情况还是要用。浏览器默认给iframe的区域都比较小:

宽度好解决,一般由父页面控制iframe的宽度,直接设置样式即可:

<iframe id="iframe" src="url" frameborder="0" style="width: 100%;"></iframe>

但是iframe的高度不会自动撑开,我们可以用JavaScript来解决。

方法1:

在父页面设置iframe的onload事件,到时候根据iframe内容的主体高度设置iframe元素的高度:

    var iframe = document.getElementById("iframe"); 
    iframe.onload = iframe.onreadystatechange = iframeload;
    function iframeload() {
        if (!iframe.readyState || iframe.readyState == "complete") {
            iframe.height = iframe.contentWindow.document.body.scrollHeight;  
        }
    }

方法2:

在子页面(iframe)里面处理设置高度:

parent.document.getElementById("iframe").height = document.body.scrollHeight;

把这份代码写在iframe的body结束标签之后,或者写在iframe的onload事件里都可以。

已知问题:

1.第一种方法用了onload,但是onload需要等待图片加载完成,比较慢。如有需要,也可以使用监测iframe的Ready事件的办法,这样比较快。

2.以上两种办法都要求父页面和子页面同源(同域),否则互相访问不到对方的document。

iframe自适应高度