iframe高度自适应
iframe高度自适应是一个很老的话题。html5虽然已经将frame 框架给废弃，但是iframe这个标签还是存在的。假如有同学不了解frame和iframe的区别，可以看我之前的文章：html框架之iframe和frame及frameset的相关属性介绍。
虽然现在iframe在项目中已经很少出现了，但是有些项目迫不得已，还是会用到iframe。近期遇到一个案例，就用到了iframe。
基本案例如下： 由于手机浏览器预览PDF不是很好，因此，将手机上预览PDF改成预览html。由于PDF是html生成的。一个10页的PDF，要用10个html来展现，为了达到类似一个PDF的效果。迫不得已在页面中使用了多个iframe来预览这些html页面。
问题：需要这些iframe高度自适应，看起来像是在看一张PDF。因此，又重提iframe自适应高度这个话题。
思路
一、在预览PDF(其实是预览html)，的表层，添加一个覆盖层。提示PDF正在加载中....
二、获取每个Iframe页面高度，并将高度赋值给Iframe。
三、当window.onload时间结束之后，我们将“提示PDF正在加载中....”的动画隐藏。【 关于load事件不清楚的同学可以看 】
四、此时Iframe的高度已经自适应，看起来就像是预览一个PDF了。
高度自适应代码代码如下：
<iframe src="test 2.html" width=“100%” height="600" id="iframe1" onload="iFrameHeight('iframe1')" name="iframe1"></iframe>
<iframe src="test 2.html" id="iframe2" onload="iFrameHeight('iframe2')" name="iframe2"></iframe>
<iframe src="test 2.html" id="iframe3" onload="iFrameHeight('iframe3')" name="iframe3"></iframe>
<iframe src="test 2.html" id="iframe4" onload="iFrameHeight('iframe4')" name="iframe4"></iframe>
</body>
<script>
console.log(document.getElementById("iframe3").contentWindow);
function iFrameHeight(id) {
var ifm= document.getElementById(id);
var subWeb = document.frames ? document.frames[id].document :ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
关于test 2.html就是你要预览的pdf页面，可以很长！
注意事项：
1、上述代码必须在localhost等服务器环境下面预览
2、test 2.html也就是iframe的src必须是同域下面
代码解释
document.getElementById("iframe3").contentWindow 可以获取iframe的window对象。
谷歌浏览器可以通过
document.frames[id].document 获取document对象
Firefox 支持， ie8 以上的ie可以通过
document.getElementById(id).contentDocument 来获取document对象。
关于document.body.scrollHeight和某个div的scrollHeight以及各种宽高的详细介绍，可以看我js/jquery各种宽高的理解和应用 ，这是去年我在慕课网录制的视频，不过至今还在排期上线中....(慕课网上线太慢)。
其他解释
其实操作iframe的方法还有很多！例如jquery有个contents()方法，可以查找iframe中的某个id或者某段内容。
例如：
$("#iframe2").contents().find("someID").html() 或者 $("#mainiframe").contains().find("someID").text()
iframe2中包含某个ID。
也可以js和jquery混着用！例如：
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
设置iframe1中所有radio选中。
JavaScript获取iframe子页面全局变量
js在父页面中获取嵌套的iframe中的全局变量，一般通过如下方法：
document.getElementById('haorooms').contentWindow.变量名
经过测试，该方法在谷歌、火狐和IE中均可以获取到！
另外有IE下面可以通过如下方式获取：（不推荐）
window.frames['haorooms'].变量名 //haorooms代表iframe的id
火狐和谷歌也支持如下写法：
window.frames['haorooms'].contentWindow.变量名 //haorooms代表iframe的id
小结
关于iframe就总结这些，上面是是这次项目中用到iframe，突然想到的，有些不周全的地方，还请大家多多指点！
对了，有人可以利用iframe等进行跨框架攻击！我以前也写了一篇关于跨框架的文章www.haorooms.com/post/liulan… ,大家在使用iframe的同时，要注意防止漏洞出现！
