您的位置：首页 > 其它

Iframe自适应其加载的内容高度

2011-10-28 14:40 363 查看
main.htm:

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />

<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />

<title>iframe自适应加载的页面高度</title>

</head>

<body>

<div><iframe src="child.htm"></iframe></div>

</body>

</html>

child.htm:

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />

<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com' />

<title>iframe 自适应其加载的网页(多浏览器兼容)</title>

<script type="text/javascript">

<!--

function iframeAutoFit()

{

try

{

if(window!=parent)

{

var a = parent.document.getElementsByTagName_r("IFRAME");

for(var i=0; i<a.length; i++) //author:meizz

{

if(a[i].contentWindow==window)

{

var h1=0, h2=0;

a[i].parentNode.style.height = a[i].offsetHeight +"px";

a[i].style.height = "10px";

if(document.documentElement&&document.documentElement.scrollHeight)

{

h1=document.documentElement.scrollHeight;

}

if(document.body) h2=document.body.scrollHeight;

var h=Math.max(h1, h2);

if(document.all) {h += 4;}

if(window.opera) {h += 1;}

a[i].style.height = a[i].parentNode.style.height = h +"px";

}

}

}

}

catch (ex){}

}

if(window.attachEvent)

{

window.attachEvent("onload", iframeAutoFit);

//window.attachEvent("onresize", iframeAutoFit);

}

else if(window.addEventListener)

{

window.addEventListener('load', iframeAutoFit, false);

//window.addEventListener('resize', iframeAutoFit, false);

}

//-->

</script>

</head>

<body>

<table border="1" width="200" style="height: 400px; background-color: yellow">

<tr>

<td>iframe 自适应其加载的网页(多浏览器兼容，支持XHTML)</td>

</tr>

</table>

</body>

</html>

很多人反应在IE7里使用它会死机，那是因为在自适应高度时触发了 window.onresize 事件，而这个事件又去调用这个调整 <iframe> 高度的函数，产生了死循环调用。

转自:http://blog.csdn.net/meizz/archive/2006/03/27/639857.aspx

==============================================================

但是网页不能刷新。把这两句都注释掉。问题解决。。

// window.attachEvent("onresize", iframeAutoFit);

// window.addEventListener('resize', iframeAutoFit, false);

==============================================================

iframe 自适应高度 js实现

代码如下:

注意!不能跨域使用，传到服务器,或者自己的iis里运行iframe 本域页面.~~

引用

<iframe src="http://www.pcieee.cn/" style="width: 100% ; border: 0px" frameborder=0 scrolling=yes name=right onload="init()" border="0"></iframe>

<script>

var lastHeight;

function init() {

aaa();

lastHeight= right.document.body.scrollHeight;

setInterval(function(){

if(right.document.body.scrollHeight!=lastHeight) {

aaa();

lastHeight= right.document.body.scrollHeight;

}

},1);

}

function aaa(){

document.all('right').height=right.document.body.scrollHeight + 20;

}

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航