iframe自适应高度

天梯梦

浏览: 13731281 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript /Jquery / Bootstrap / Web

IE Opera 浏览器 JavaScript Safari

所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了 iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死 iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例：

<script type="text/javascript">
	function reinitIframe(){
		var iframe = document.getElementById("frame_content");
		try{
			iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
		}catch (ex){}
	}

	window.setInterval("reinitIframe()", 200);
</script>
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>

一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在主页面追加以下测试代码，以输出这两个值，代码示例：

<script type="text/javascript">
	function checkHeight() {
		var iframe = document.getElementById("frame_content");
		var bHeight = iframe.contentWindow.document.body.scrollHeight;
		var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
		alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
	}
</script>
<div><button onclick="checkHeight()">Check Height</button></div>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button onclick="toggleOverlay()">Toggle Overlay</button></div>

<div style="height:160px;position:relative">
	<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>

<script type="text/javascript">
	function toggleOverlay() {
		var overlay = document.getElementById('overlay');
		overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
	}
</script>

下面列出以上代码在各浏览器的测试值：

（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）

/层隐藏时层展开时

bHeight dHeight bHeight dHeight

IE6	184	184	184	303
IE7	184	184	184	303
FF	184	184	184	303
Opera	181	181	300	300
Safari	184	184	303	184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

<script type="text/javascript">
	function reinitIframe(){var iframe = document.getElementById("frame_content");
		try{
			var bHeight = iframe.contentWindow.document.body.scrollHeight;
			var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
			var height = Math.max(bHeight, dHeight);
			iframe.height =  height;
		}catch (ex){}
	}

	window.setInterval("reinitIframe()", 200);
</script>

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值 184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。

可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

<script type="text/javascript">
	function reinitIframe(){
		var iframe = document.getElementById("frame_content");
		try{
			var bHeight = iframe.contentWindow.document.body.scrollHeight;
			var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
			var height = Math.max(bHeight, dHeight);
			iframe.height =  height;
		}catch (ex){}
	}

	window.setInterval("reinitIframe()", 200);
</script>
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>

附Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单的传统处理方式：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>

当然，如果想扩展一下，可以加一个iframe的loading，详细请看 here 第四种方法（兼容FF,IE）

另外在这里说说四种浏览器对 document.body 的clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。

分享到：

PHP类UTF8编码内的繁简转换-繁体-简体 | 浏览器兼容手册

2010-02-13 00:18
浏览 19919
评论(4)
分类:Web前端
查看更多

4 楼天梯梦 2014-06-16

minapengqiang 写道

怎么应用的，能发个例子吗，我也遇到tab切换div，每个div都包含一个iframe的问题了

http://www.katiehyle.com 这个是我以前做的网站，你可以参考一下 blog menu

3 楼 minapengqiang 2014-06-15

怎么应用的，能发个例子吗，我也遇到tab切换div，每个div都包含一个iframe的问题了

2 楼天梯梦 2014-04-01

yangfande362 写道

我的是两个tab切换div，每个div都包含一个iframe，使用每个iframe添加onload="this.height=this.contentWindow.document.documentElement.scrollHeight"也不行，只能使第一个iframe的高度自适应。看了楼主的文章，第二个iframe的高度通过 window.setInterval("reinitIframe()", 200); 终于解决。
非常感谢

不客气！

1 楼 yangfande362 2014-03-27

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论