01/3
2018
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。