当前位置：首页 > 资讯 > 技术文档

javascript 装载iframe子页面，自适应高度

时间：2020-03-12 22:02 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript 装载iframe子页面，自适应高度

假设主页面有一个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执行

[u]复制代码[/u] 代码如下:

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;
}

以下方法只需要把代码放在主页面：页面代码：

[u]复制代码[/u] 代码如下:

<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脚本（加在主页面）：

[u]复制代码[/u] 代码如下:

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;
}

全部评论(0)

上一篇：JS实现的驼峰式和连字符式转换功能分析
下一篇：JavaScript在IE和Firefox上的差异及相互替代的实现方法第1/2页

资讯排行榜
更多>>