首页 > web前端 > js教程 > javascript动态的改变IFrame的高度实现自动伸展_javascript技巧

javascript动态的改变IFrame的高度实现自动伸展_javascript技巧

WBOY
发布: 2016-05-16 17:20:00
原创
1374 人浏览过

动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩
原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面),添加JavaScript

复制代码 代码如下:

<script> <br>function IFrameResize(){ <br>//alert(this.document.body.scrollHeight); //弹出当前页面的高度 <br>var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象 <br>//alert(obj.height); //弹出父页面中IFrame中设置的高度 <br>obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度 <br>} <br></script>

2、在IFrame的具体页面(就是子页面)的body中,添加onload事件
复制代码 代码如下:



3、为父页面的IFrame标签添加ID,即上面第一步,方法体中的第2行所写到的childFrame
复制代码 代码如下:



具体实现二:
复制代码 代码如下:

//动态改变父类iframe的高度
//iframe页面调用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到页面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});

父页面的iframe为
复制代码 代码如下:


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板