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

Javascript
比较精简的Javascript拖动效果函数代码
一个可以得到元素真实的背景颜色的javascript脚本
代码精简的可以实现元素圆角的js函数
用JS实现的一个include函数
IE 缓存策略的BUG的解决方法
$()JS小技巧
js右键菜单效果代码
XML的代替者----JSON
清空代码防止查看源代码的js代码
一个JS翻页效果
用js获取点击图片的值!
用innerHTML &符号副值给文本框后会变成&的方法
让iframe自适应高度(支持XHTML,支持FF)
dsfasdfasdf
用ASP将SQL搜索出来的内容导出为TXT的代码
弹出广告特效(一个IP只弹出一次)的代码
javascript实现的动态文字变换
服务器安全设置的几个注册表设置
取键盘键位ASCII码的网页
用倒置滤镜把div倒置,再把table倒置。

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 318 ::
收藏到网摘: 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;
}