简明现代魔法 -> JavaScript -> iframe 高度自适应

iframe 高度自适应

2010-03-07

在 Google 上搜了很久找到了下面这个 js。

function SetCwinHeight(obj)
{
  	var cwin=obj;
  	if (document.getElementById)
  	{
    	if (cwin && !window.opera)
    	{
      		if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        		cwin.height = cwin.contentDocument.body.offsetHeight + 20; 
      		else if(cwin.Document && cwin.Document.body.scrollHeight)
        		cwin.height = cwin.Document.body.scrollHeight + 10;
    	}
  	}
}

这个方法在 Opera 下不能通过。

各浏览器在处理 document.scrollHeight 或者 offsetHeigth 时的特殊现象有所不同,Opera 浏览器在处理 iframe 内容的时候,用的是 contentWindow 而处理内容高度的时候,却与 IE 一致

下面这段代码实现了兼容 Opera。

<html>
<head>
<script>
function SetCwinHeight(obj)
{
  	var cwin=obj;
  	if (document.getElementById)
  	{
   		if (cwin && !window.opera)
    	{
      		if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        		cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS
      		else if(cwin.Document && cwin.Document.body.scrollHeight)
        		cwin.height = cwin.Document.body.scrollHeight + 10;//IE
    	}
    	else
    	{
        	if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
            	cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
    	}
  	}
}
</script>
</head>
<body>
<iframe src="NowaMagic.html" onload="SetCwinHeight(this);" width="600px">
</body>
</html>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们