网页技巧:三谈iFrame框架自顺应高度
日期：2013-07-19 浏览次数：20659 次
| 网页制造aiyiweb文章简介：三谈Iframe自顺应高度. |
为什么是三谈
为什么是三谈呢？一是由于这真的是一个被说烂的话题，二是由于太师傅在n年前就写过这篇再谈iframe自顺应高度。之所以再提该问题，是由于之前项目中确实遇到了这个问题的方方面面，有必要总结一下。希望对各位有协助，有错误请指正。
同域、子页面高度不会动态添加
这种情况最简单，直接通过脚本获取字页面实际高度，修正iframe元素高度即可。但有二点必须留意：
- 如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括Webkit内核的浏览器，具体请看这个Demo。所以你要么进行浏览器检测，要么用
Math.max计算一个最大值，要么你想别的方法。 iframe所包含页面可能非常大，需求很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要留意的是，IE下必须使用微软事件模型obj.attachEvent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。
(function(){
var frame = document.getElementById("frame_content_parent"),
setIframeHeight = function(){
var frameContent = frame.contentWindow.document,
frameHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);
frame.height = frameHeight;
};
if(frame.addEventListener){
frame.addEventListener("load",setIframeHeight,false);
}else{
frame.attachEvent("onload",setIframeHeight);
}
})();
同域、子页面高度会动态添加
原理与第一种情况一样，多一个计时器，不断检测字页面高度，当子页面高度和iframe的高度不分歧时，重新设置iframe的高度。这边也可以加一个try在js出错时，加一个足够的高度。
(function(){
var _reSetIframe = function(){
var frame = document.getElementById("frame_content_parent")
try {
var frameContent = frame.contentWindow.document,
bodyHeight = Math.max(frameContent.body.scrollHeight,frameContent.documentElement.scrollHeight);
if (bodyHeight != frame.height){
frame.height = bodyHeight;
}
}
catch(ex) {
frame.height = 1800;
}
}
if(frame.addEventListener){
frame.addEventListener("load",function(){setInterval(_reSetIframe,200);},false);
}else{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
同域、子页面高度会动态添加、脚本可能完全失效
第二个例子中，考虑到了脚本出错的情况，但是万一脚本基本不执行了呢，那iframe中的内容就会由于iframe的高度不够而显示不了。为此我们通常事先设置一个足够的高度，为了前端控制方便，我觉得写在CSS文件中比较合适，需求修正时只改CSS就行了。这里我设置了selector{ height:1800px; }。需求留意的是，写在款式表里的款式，不能直接用node.style[property]来取，对于微软模型，要用node.currentStyle[property]（题外话：悲剧的IE模型不支持CSS伪类），对于W3C模型，要用window.getComputedStyle(node,null)[property]来取。我这里图方便直接用了YUI。
这里又有一个问题，设置iframe的高度大于其包含页面的高度时，各个浏览器的处理不一样。例如在Firefox下，必须计算body元素的高度，而html元素的高度等于iframe的高度，然而当恰巧这个页面又有绝对定位、未清浮动元素时，又不能通过<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
