本文介绍了一种适用于IE和Firefox浏览器的IFrame自适应宽度和高度的方法。通过加入特定的DOCTYPE声明并使用JavaScript函数TuneHeight，可以实现IFrame内容随着窗口大小的变化而变化的效果。
iframe自适应宽度和高度
支持IE和Firefox浏览器的iframe自适应宽度和高度代码，先确定嵌入页和被嵌入网页加入了以下声明：在嵌入页加入以下代码，修改代码中的“test.html”为你的被嵌入页URL即可。
<script type="text/javascript" language="javascript"> <!-- 
function TuneHeight(fm_name,fm_id){ 
var frm=document.getElementById(fm_id); var subWeb=document.frames?document.frames[fm_name].document:frm.contentDocument; 
if(frm != null && subWeb != null){ frm.style.height = subWeb.documentElement.scrollHeight+"px"; //如需自适应宽高，去除下行的“//”注释即可 frm.style.width = subWeb.documentElement.scrollWidth+"px";
} 
} //--></script>
使用方法：
<table style="height: auto; width: 100%; background-color: #cf0000;"> <tr> <td style="width: 10%; height: 100%; background-color: #cf0000;" valign="top"> <iframe onload="{TuneHeight('left','left');}" src="test1.aspx" frameborder="0" style="border-left-width: thin; border-top-style: none; border-right-style: none; border-bottom-style: none; background-color: #cf0000;" name="left" id="left" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" src="MainMenu.aspx"> </iframe> </td> <td style="background-color: #8c1211; width: 1px"> |</td> <td valign="top" style="width: 90%; height: 100%; background-color: #cf0000;"> <iframe onload="{TuneHeight('right','right');}" src="test2.aspx" frameborder="0" style="border-left-width: thin; background-color: #cf0000;" name="right" id="right" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="no" ></iframe> </td> </tr> </table>
function TuneHeight(fm_name,fm_id)
扫一扫
3935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
