用JavaScript按需改变网页框架的大小

 网页用到iframe来嵌套页面，总觉得iframe那个滚动条很是烦人，于是要想个办法来根据载入的页面大小动态改变iframe的宽度和高度。页面是这样的:

<table>
<tr><td><div id="leftMenu"><!-- 左边的菜单 --></div></td>
<td id="frameContainer" ><iframe scrolling="no" frameborder="no" name="main"></td></tr>
</table>

设想是让iframe里面的页面去改变父窗口的iframe的高和宽。</p><p>以下是第一次尝试：

function dyjustifyframe()
{
var o =window.parent.document.getElementsByName("main")[0];
o.height= document.body.scrollHeight;
o.width = document.body.scrollWidth;
}

把function dyjustifyframe()放在iframe中嵌套的子页面里，让子页面的body onLoad="dyjustifyframe()"。但是iframe并没有height和width属性，所以上面不能这样写。于是找到第二个方法。用修改 iframe 上级的table的大小来间接改变其大小。先给iframe加上

style="width:100%;height:100%"

使其随着外面table的大小改变而改变。于是把 dyjustifyframe()改成：

function dyjustifyframe()
{
var o=window.parent.document.getElementById("frameContainer");
if (o)
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
}

上面的代码在ie中没问题，但在ff中调试时发现子页面的长度超出屏幕的话scrollHeight就只能变大不能变小，所以如果从一个长页面转到一个短页面的话父页面的长度不会改变。所以还需要修改一下。

function dyjustifyframe()
{
var o= window.parent.document.getElementById("frameContainer");
if (o)
{
if (navigator.appName == "Netscape")
{
o.height = document.body.offsetHeight + 40;
o.width = document.body.offsetWidth + 20;
}
else
{
o.height = document.body.scrollHeight;
o.width = document.body.scrollWidth;
}
}
}

要确保显示正常，还需要保证 frameContainer和leftMenu外面的td的大小没被设定，此外body的height必须是默认的auto，如果body是100%就会使代码失效