Posted in Javascript onMarch 20, 2009
假设主页面有一个div,里面放置一个iframe
<div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe> </div>
3个菜单链接,分别在iframe加载 1.html、2.html、3.html 三个页面。
3个子页面分别在自己页面加载完window.onload执行
function aa(){ var newHeight = document.body.scrollHeight + 20 + "px"; window.parent.document.getElementById("frameBox").style.height = newHeight; //以上firefox通过,但是ie6必须加上下面这句,不然iframe高度是改了,但是可见区域没有改 window.parent.document.getElementById("frameWin").style.height = newHeight; }
以下方法只需要把代码放在主页面:
页面代码:
<div style="border:1px solid #7e99c6" id="frameBox"> <iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe> </div>
js脚本(加在主页面):
function test2(){ var frameWin = document.getElementById("frameWin"); var frameBox = document.getElementById("frameBox"); var newHeight; if (frameWin.Document){ newHeight = frameWin.Document.body.scrollHeight + 20 + "px"; }else{ newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px"; } frameWin.style.height = newHeight; frameBox.style.height = newHeight; }
javascript 装载iframe子页面,自适应高度
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@