您的位置：首页 > 其它

iframe 自动适应高度

2010-06-16 14:09 337 查看

以下是iframe 实现自适应高度的DEMO

//////////////iframeResize.js内容/////////////////

function iframeAutoFit()

{
　　try{
　　　　if(window!=parent){
　　　　　　var a = parent.document.getElementsByTagName("IFRAME");
　　　　　　for(var i=0; i<a.length; i++) {
　　　　　　　　if(a[i].contentWindow==window){
　　　　　　　　　　var h1=0, h2=0, d=document, dd=d.documentElement;
　　　　　　　　　　a[i].parentNode.style.height = a[i].offsetHeight +"px";
　　　　　　　　　　a[i].style.height = "10px";
　　　　　　　　　　if(dd && dd.scrollHeight) h1=dd.scrollHeight;
　　　　　　　　　　if(d.body) h2=d.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);
}
else if(window.addEventListener){
　　window.addEventListener('load', iframeAutoFit, false);
}

///////////////iframeResize内容完////////////////////

<html>
<head>

<title>iframe内的页面命名为child.html，内容如下：</title>
<script src="js/iframeResize.js" type="text/javascript" ></script>
</head>
<body>
<div>
<table border="0" width="200" style="height: 400px; background-color: black">
<tr>
<td></td>
</tr>
</table>
</body>
</html>

////////////////////////拥有iframe的页面为index.html，内容如下：/////////////////////

<html>
<head></head>
<body>
<div><iframe src="child.html" frameBorder="0" scrolling="no"></iframe></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航