web开发的工作中我们难免会遇到使用iFrame这个标签，有时候iFrame的高度我们要让它自动的去适应内容的高度，防止出现滚动条，利于页面的美化。这里示例个使用JavaScript使iFrame自动适应高度的方法。
Default页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>iframe如何在页面中使用JS自定义高度</title> </head> <body> <div> <ul> <li>ifrmae要在下面的li标签里自动适应高度</li> <li> <iframe id="myFrame" frameborder="0" marginheight="0" marginwidth="0" src="myI.aspx"> </iframe> </li> </ul> </div> </body> </html>
子页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>这个页面是要嵌入Default.aspx的子页面</title> </head> <body> <form id="form1" runat="server"> <div style="height: 300px; 400px; border: 1px dashed #000;"> 这个DIV高300宽400 </div> </form> </body> </html>
看到Default页面里的IFrame高度都没有设定。
<script type="text/javascript">
//获得ID为DIVr的标签高和宽
var h = document.getElementById("div").offsetHeight;
var w = document.getElementById("div").offsetWidth;
//获得父页面的iFrame标签
var iframe = window.parent.document.getElementById("myFrame");
iframe.style.width = w + "px";
iframe.style.height = h + "px";
</script>
在default页面写一个function
例如
Function helloword(){
Alert('您好');
}
子页面调用方法
Window.parent.helloword();
