iframe自适应高度和宽度

weixin_34289744

于 2010-06-20 22:21:00 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/frouds/archive/2010/06/20/1761575.html

本文介绍了一种解决在Chrome浏览器中iframe无法正确自适应其内容大小的问题的方法。通过检查不同浏览器内核对iframe的支持情况，实现了跨浏览器兼容性的解决方案。

<div>
　　<iframe id="myframe" marginHeight=0 marginWidth=0 frameBorder=0 src="innerframe.html" onload="IFrameResize()"></iframe>
</div>

在Chrome中不行，其他浏览器都可以！

function IFrameResize()
{
	var iframe = document.getElementById("myframe"); 
	var iframeDocument = null;
	//safari和chrome都是webkit内核的浏览器，但是webkit可以,chrome不可以
	if (iframe.contentDocument)
	{ 
		//ie 8,ff,opera,safari
		iframeDocument = iframe.contentDocument;
	} 
	else if (iframe.contentWindow) 
	{ 
		// for IE, 6 and 7:
		iframeDocument = iframe.contentWindow.document;
	} 
	if (!!iframeDocument) {
		iframe.width=iframeDocument.documentElement.scrollWidth+"px";
		iframe.height=iframeDocument.documentElement.scrollHeight+"px";		
	} else {
		alert("this browser doesn't seem to support the iframe document object");
	} 

}

转载于:https://www.cnblogs.com/frouds/archive/2010/06/20/1761575.html