<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>用JS控制IFrame的高度，让它的高度自动适应</title> <style type="text/css"> .letCenter { margin: 30px auto; width: 800px; height: 50px; } </style> <script language="javascript" type="text/javascript"> //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 //定义iframe的ID var iframeids = ["menuFrame"]; //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide = "yes"; function dyniframesize() { var dyniframe = new Array(); for (var i=0; i<iframeids.length; i++) { if (document.getElementById) { //自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids[i]); if (dyniframe[i] && !window.opera) { dyniframe[i].style.display = "block"; if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) { //如果用户的浏览器是IE var contentDocHeight = dyniframe[i].contentDocument.body.offsetHeight; dyniframe[i].height = contentDocHeight; } else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) { //其它浏览器 dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; } } } //根据设定的参数来处理不支持iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj = document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); tempobj.style.display="block"; } } } if (window.addEventListener) { window.addEventListener("load", dyniframesize, false); } else if (window.attachEvent) { window.attachEvent("onload", dyniframesize); } else { window.onload = dyniframesize; } </script> </head> <body> <div class="letCenter"> <h1> 这是主页面</h1> </div> <div style="border:solid 1px red; margin:0px 0px 0px 0px; padding:0px 0px;"> <iframe id="menuFrame" name="menuFrame" frameBorder="0" scrolling="no" src="ControlIFrameHeight_Child.htm" width="100%"></iframe> </div> </body> </html> |