[转]iframe的自适应高度jscript
下边是一个常用的页面四切分的框架页,没有使用frameset,因为不好控制,改用table和iframe来代替frameset构建框架页,其实利用iframe的name和跳转连接时指定target="iframe的名字",就可以做到和frameset中的target属性一样的跳转刷新另外框架的结果.
1: <body topmargin="0" leftmargin="0">
2: <center>
3: <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0" align="center">
4: <tr>
5: <td colspan="2" height="134">
6: <iframe width="100%" height="100%" frameborder="0" src="./PubPage/Top.html" scrolling="no" noresize></iframe>
7: </td>
8: </tr>
9: <tr>
10: <td width="235" height="475" valign="top">
11: <iframe width="100%" height="100%" name="LeftFrame" frameborder="0" id="LeftFrame" src="./PubPage/Left.aspx" scrolling="no" noresize></iframe>
12: </td>
13: <td height="475" valign="top">
14: <div style="height: 100%">
15: <iframe width="100%" height="100%" name="RightFrame" frameborder="0" id="RightFrame" src="./PubPage/Rightdefault.aspx"></iframe>
16: </div>
17: </td>
18: </tr>
19: <tr>
20: <td colspan="2" height="134">
21: <iframe width="100%" height="100%" frameborder="0" src="./PubPage/Bottom.html" scrolling="no"
22: noresize></iframe>
23: </td>
24: </tr>
25: </table>
26: </center>
27: </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>
