iframe自适应高度

最新推荐文章于 2025-07-10 16:09:19 发布

原创最新推荐文章于 2025-07-10 16:09:19 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #function #ie #jquery #浏览器

Javascript 专栏收录该内容

23 篇文章

订阅专栏

jquery:在IE7/IE8下，由于加载顺序速度的关系，第一次打开有时获取不到内嵌页面的高度，有时又可以

$("#frame_content").load(function(){
	var mainheight = $(this).contents().find("body").height()+60;
	$(this).height(mainheight);
});

js：每隔一段时间计算iframe高度，适用变化的高度，document.body针对IE浏览器，document.documentElement针对火狐

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);

注意：由于加载顺序的关系，都需以http形式打开页面才能生效。iframe会阻塞主页面的onload事件,主页面和iframe共享同一个连接池。在IE6、IE7、IE8下iframe的load事件会阻止window的load事件。

参考资料：

三谈Iframe自适应高度

再谈iframe自适应高度

iframe异步加载技术及性能