javascript 装载iframe子页面,自适应高度_Javascript教程-查字典教程网
javascript 装载iframe子页面,自适应高度
javascript 装载iframe子页面,自适应高度
发布时间:2016-12-30 来源:查字典编辑
摘要:假设主页面有一个div,里面放置一个iframe复制代码代码如下:3个菜单链接,分别在iframe加载1.html、2.html、3.htm...

假设主页面有一个div,里面放置一个iframe

复制代码 代码如下:

<div id="frameBox">

<iframe id="frameWin" src="1.html" name="opWin" 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 id="frameBox">

<iframe id="frameWin" src="01.html" name="opWin" 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教程学习
    热门Javascript教程学习
    编程开发子分类