当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 装载iframe子页面，自适应高度

Javascript
javascript秒数倒计时自动跳转代码
js动态生成按钮并动态生成8位随机数
JS旋转图片阵类
javascript md5加密代码
window.onload的页面加载技巧
javascript显示隐藏层比较不错的方法分析
javascript优先加载笔记代码
JavaScript for in锚点的动态创建
初学JavaScript第二章
javascript类型File的Input按钮功能研究
JavaScript下申明对象的几种方法小结
一个jquery的弹出层的插件
IE与firefox之jquery用法区别
判断JavaScript对象是否可用的最正确方法分析
javascript布局查看器效果代码
js模拟画笔效果
无废话JavaScript教程(全集)
执行iframe中的javascript方法
解决function函数内的循环变量
jQuery弹出层插件简化版代码

No. « 111 112 113 114 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 201 ::
收藏到网摘: n/a

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