您的位置：首页 > Web前端 > JavaScript

[转]iframe的自适应高度jscript

2009-04-22 12:09 169 查看

下边是一个常用的页面四切分的框架页,没有使用frameset,因为不好控制,改用table和iframe来代替frameset构建框架页,其实利用iframe的name和跳转连接时指定target="iframe的名字",就可以做到和frameset中的target属性一样的跳转刷新另外框架的结果.

<body topmargin="0" leftmargin="0">

<center>

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" align="center">

<tr>

<td colspan="2" height="134">

<iframe width="100%" height="100%" frameborder="0" src="./PubPage/Top.html" scrolling="no"noresize></iframe>

</td>

</tr>

<tr>

<td width="235" height="475" valign="top">

<iframe width="100%" height="100%" name="LeftFrame" frameborder="0" id="LeftFrame" src="./PubPage/Left.aspx" scrolling="no"noresize></iframe>

</td>

<td height="475" valign="top">

<div style="height: 100%">

<iframe width="100%" height="100%" name="RightFrame" frameborder="0" id="RightFrame" src="./PubPage/Rightdefault.aspx"></iframe>

</div>

</td>

</tr>

<tr>

<td colspan="2" height="134">

<iframe width="100%" height="100%" frameborder="0" src="./PubPage/Bottom.html" scrolling="no"

noresize></iframe>

</td>

</tr>

</table>

</center>

</body>

放在被iframe引用的页面里,如果页面很多,可以做成.js文件让每个页面引用就行了

<script type="text/javascript">

function iframeAutoFit()

{

if(self!=top && window.name=="RightFrame") //这个name对应的是iframe的name,和ID最好一致

{

var iframe = parent.document.getElementById(window.name);

if(iframe)

{

iframe.parentNode.style.height = iframe.style.height;

iframe.style.height = 10;

var h = document.body.scrollHeight;

var minimalHeight = parseInt((window.screen.width*11)/16, 10) - 280;

h = h<minimalHeight ? minimalHeight : h;

if(window.navigator.appName == "Microsoft Internet Explorer"

　　　　　　　　　　　　　　&& iframe.frameBorder=="1")

h += 4;

iframe.parentNode.style.height = iframe.style.height = h;

}

else

alert("Iframe's id unequal to iframe's name!");

}

}

//这个页面加载时加载js脚本,如需要某按钮单击改变高度时,在按钮实践中直接调用上边的函数
if(document.attachEvent)

window.attachEvent("onload",iframeAutoFit);

else

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

</script>

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

标签：

相关文章推荐

新的分享

章节导航