繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 装载iframe子页面，自适应高度
- Javascript
- javascript实现的鼠标链接提示效果生成器代码
- javascript实现动态CSS换肤技术的脚本
- 一个即时表单验证的javascript代码
- javascript之dhDataGrid Ver2.0.0代码
- syntaxhighlighter 使用方法
- 建立良好体验度的Web注册系统ajax
- 抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
- JTrackBar水平拖动效果
- 用JTrackBar实现的模拟苹果风格的滚动条
- 非常不错的javascript 图片慢慢下层效果
- 网上应用的一个不错common.js脚本
- alixixi runcode.asp的代码不错的应用
- 用javascript实现点击链接弹出"图片另存为"而不是直接打开
- 用javascript实现给图片加链接
- document.styleSheets[0].rules 与 cssRules区别
- javascript 控制超级链接的样式代码
- 一个刚完成的layout（拖动流畅，不受iframe影响）
- 写了一个layout，拖动条连贯，内容区可为iframe
- 用JS实现网页元素阴影效果的研究总结
- js下在password表单内显示提示信息的解决办法
Javascript 中的 javascript 装载iframe子页面，自适应高度
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 412 ::
收藏到网摘: 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;
}
评论 (0) All
