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

ttx9n · 发表于 2013-10-12 16:57:07

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩，实现原理很简单就是在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度，感兴趣的朋友可以了解下动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩
原理：在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度
具体实现一:
1、在IFrame的具体页面(就是子页面)，添加JavaScript
复制代码代码如下:
<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //弹出当前页面的高度
var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
//alert(obj.height); //弹出父页面中IFrame中设置的高度
obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度
}
</script>

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

3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame
复制代码代码如下:
<IFRAME border=0 marginWidth=0
frameSpacing=0 marginHeight=0
src="frame1.jsp" frameBorder=0
noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

具体实现二:
复制代码代码如下:
//动态改变父类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为
复制代码代码如下:
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

sykzus · 发表于 2022-8-23 13:20:53

啊，数码撒飒飒飒飒

95nd4ba · 发表于 2022-10-14 02:16:49

天天源码社区论坛

qzdhcgs · 发表于 2022-10-14 06:36:26

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

5vulod · 发表于 2023-3-6 10:09:46

哟哟哟哟哟以偶

qq303604905 · 发表于 2023-8-20 19:08:51

这个源码还可以

白狐软件 · 发表于 2023-8-27 18:58:48

谢谢楼主分享

czoz5y · 发表于 2023-10-21 07:37:05

我要金豆金豆金豆

白狐软件 · 发表于 2024-5-20 22:55:52

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

6ox8dn · 发表于 2024-7-10 15:45:13

搞个免费的用用

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript动态的改变IFrame的高度实现自动伸展

相关帖子