iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。
一、同域下父子页面的通信
父页面parent.html
&script type="text/javascript"&
function say(){
alert("parent.html");
function callChild(){
myFrame.window.say();
myFrame.window.document.getElementById("button").value="调用结束";
&input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/&
&iframe name="myFrame" src="child.html"&&/iframe&
子页面child.html
&script type="text/javascript"&
function say(){
alert("child.html");
function callParent(){
parent.say();
parent.window.document.getElementById("button").value="调用结束";
&input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/&
父页面调用子页面方法：FrameName.window.childMethod();
子页面调用父页面方法：parent.window.parentMethod();
DOM元素访问
获取到页面的window.document对象后，即可访问DOM元素
要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：
1. iframe上用onload事件
2. 用document.readyState=="complete"来判断
二、跨域父子页面通信方法
如果iframe所链接的是外部页面，因为安全机制就不能使用同域名下的通信方式了。
父页面向子页面传递数据
实现的技巧是利用location对象的hash值，通过它传递通信数据。在父页面设置iframe的src后面多加个data字符串，然后在子页面中通过某种方式能即时的获取到这儿的data就可以了，例如：
1. 在子页面中通过setInterval方法设置定时器，监听location.href的变化即可获得上面的data信息
2. 然后子页面根据这个data信息进行相应的逻辑处理
子页面向父页面传递数据
实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。
阅读(...) 评论()用js代码实现iframe子页面刷新父页面
在子页面刷新父页面，可以用js代码来实现。
只需加入下面的代码：&script language=&javascript&&parent.location.replace(parent.location.href); &/script&
.NET中在后台处理完数据可以：Response.Write(&&script language=“javascript”&parent.location.replace(parent.location.href);&/script&&);
帖子永久地址：&<button type="submit" class="pn" onclick="setCopy('用js代码实现iframe子页面刷新父页面\nhttp://ymbc.cc/thread-.html', '帖子地址已经复制到剪贴板您可以用快捷键 Ctrl + V 粘贴到 QQ、MSN 里。')">推荐给好友圆梦论坛 - 论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、管理员和版主有权不事先通知发贴者而删除本文
为了论坛的发展，有心人赞助一下吧：
为了论坛的发展，有心人赞助一下吧：
& & 我一直哭，我一直哭，哭我没有鞋穿，直到我遇到一个人，她竟然连脚都没有！
为了论坛的发展，有心人赞助一下吧：
& & 台湾也正在走向四化——精神韩国化，身体日本化，社会泰国化，经济菲律宾化。
为了论坛的发展，有心人赞助一下吧：
& & 在年华里辗转的回忆。经过长时间的渲染、早已清晰。延绵不断的散开。在内心撕开一片痕迹。然后钻进去与悲伤一起存活。经久不息。
为了论坛的发展，有心人赞助一下吧：
& & 准备爱一个人就好像准备好了参加一场赌博，但是赌的内容不是能不能得到她的爱，而是能不能在她需要爱的时候恰巧出现。
为了论坛的发展，有心人赞助一下吧：
& & 要过多久才能把自己从悲伤里蜕变。不在与那么多伤情的想念沉淀在悲伤里。何时回忆再也不是触及悲伤。
为了论坛的发展，有心人赞助一下吧：
& & 准备爱一个人就好像准备好了参加一场赌博，但是赌的内容不是能不能得到她的爱，而是能不能在她需要爱的时候恰巧出现。
为了论坛的发展，有心人赞助一下吧：
Powered by Discuz! X3.2动态的改变IFrame的高度实现IFrame自动伸展适应高度
字体：[ ] 类型：转载 时间：
动态的改变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.scrollH //调整父页面中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&
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具后使用快捷导航没有帐号？
只需一步，快速开始
查看: 50082|回复: 34
装载iframe 子页面，自适应高度
UID324161在线时间 小时积分5075帖子离线17054 天注册时间
这几天刚刚做了这个东西，有网友问到，所以分享一下。
ie6、firefox2 通过，麻烦有ie7的网友测试一下，
由于有其他代码，剖析出来麻烦，截图也麻烦，代码很简单，所以就直接写部分出来好了。
假设主页面有一个div，里面放置一个iframe
&div id=&frameBox&&
&iframe id=&frameWin& src=&1.html& name=&opWin& style=&width:100%; height:100% & frameborder=&0&&&scrolling=&no&&&/iframe&
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 = newH
& & & & //以上firefox通过，但是ie6必须加上下面这句，不然iframe高度是改了，但是可见区域没有改
& & & & window.parent.document.getElementById(&frameWin&).style.height = newH
UID275674在线时间 小时积分311帖子离线17054 天注册时间
中级会员, 积分 311, 距离下一级还需 189 积分
楼主 我试了一下，在IE7下不管用。。。。哭了
你告诉我你这代码具体用法吧 我是菜鸟 难道我用错了
UID324161在线时间 小时积分5075帖子离线17054 天注册时间
觉得原来的方法不是很好
每一个嵌进来的页面都要去修改占用了每一个嵌进来的页面的onload
所以修改了一下，把函数放在了主页面，ie6、firefox2 通过，希望ie7的网友帮忙测试
页面代码：
&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&
js脚本（加在主页面）：
function test2(){
& & & & var frameWin = document.getElementById(&frameWin&);
& & & & var frameBox = document.getElementById(&frameBox&);
& & & & var newH
& & & & if (frameWin.Document){
& & & & & & & & newHeight = frameWin.Document.body.scrollHeight + 20 + &px&;
& & & & }else{
& & & & & & & & newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + &px&;
& & & & frameWin.style.height = newH
& & & & frameBox.style.height = newH
UID324161在线时间 小时积分5075帖子离线17054 天注册时间
再次修改一下，上面必须注意的一点是，Document必须是大写
if (frameWin.Document){
& && &newHeight = frameWin.[color=Red]Document[/color].body.scrollHeight + 20 + &px&;
}else{
& && &newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + &px&;
}
复制代码
不过这里可以用下面代码代替：
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + &px&;
UID147171在线时间 小时积分12957帖子离线17054 天注册时间
frameWin.window 就可以访问了
这是访问 ifarme 下的 ifarme 的代码
window.frames[&MainFarme&].window.frames[&menuLeft&].LoadHTML(urldata);
UID342427在线时间 小时积分622帖子离线17054 天注册时间
高级会员, 积分 622, 距离下一级还需 378 积分
不在同一个域名下就不能用了，说没有权限，为什么呢，谁呢解决这个问题？
UID150322在线时间 小时积分1631帖子离线17054 天注册时间
银牌会员, 积分 1631, 距离下一级还需 1369 积分
能跨域的吗？
UID493820在线时间 小时积分311帖子离线17054 天注册时间
中级会员, 积分 311, 距离下一级还需 189 积分
原帖由 [i]playboy2925 于
15:29 发表
能跨域的吗？
iframe 没有跨域问题吧,只要你引用的页面没有做特殊限制(比如自我检测是否被被人框架应用)应该可以应用任何页面的吧
跨域问题是在js中,由于同源(出于安全考虑)
我遇到的跨域就是xmldom和xmlHttprequest
怎么说呢,虽然跨域带来麻烦,但是我是支持这样做法的,毕竟这样安全些
前段时间我也做了iframe自适应,和楼主一样
我不知道楼主的20px是不是和我的一样呢
我的注释是://因为有横向滚动条会使得高度遮住20px
当然你已可以通过设置iframe的width来解决(不过不推荐这样,不符合逻辑)
[[i] 本帖最后由 Reany 于
09:05 编辑 ]
UID331683在线时间 小时积分124帖子离线17054 天注册时间
初级会员, 积分 124, 距离下一级还需 76 积分
&iframe id=&iFrame1& name=&iFrame1& width=&100%& onload=&this.height=iFrame1.document.body.scrollHeight& frameborder=&0& scrolling=&no& src=&/thread--1.html&&&/iframe&
&!--重要提示：src填写的网页地址一定要和本页面在同一个站点上，否则会报错“拒绝访问！”--&
&提示：您可以先修改部分代码再运行
为什么要这么复杂。。我这也一样行。。。
UID170190在线时间 小时积分636帖子离线17054 天注册时间
高级会员, 积分 636, 距离下一级还需 364 积分
FF3貌似无效？
UID400694在线时间 小时积分1757帖子离线17054 天注册时间
银牌会员, 积分 1757, 距离下一级还需 1243 积分
IE7好像不能用
UID219235在线时间 小时积分6395帖子离线17054 天注册时间
&iframe id=&iFrame1& name=&iFrame1& width=&100%& onload=&this.height=iFrame1.document.body.scrollHeight；this.width=iFrame1.document.body.scrollWidth& frameborder=&0& scrolling=&no& src=&/thread--1.html&&&/iframe&
&!--重要提示：src填写的网页地址一定要和本页面在同一个站点上，否则会报错“拒绝访问！”--&
经典啊，不知加this.width=iFrame1.document.body.scrollWidth这个能否行 没测试
UID464952在线时间 小时积分2901帖子离线17054 天注册时间
银牌会员, 积分 2901, 距离下一级还需 99 积分
跨域怎么解决？
UID301237在线时间 小时积分1290帖子离线17054 天注册时间
银牌会员, 积分 1290, 距离下一级还需 1710 积分
我怎么没有发现效果呢。。。
恕本人愚钝，100%高度如何可以见得？
UID447251在线时间 小时积分2975帖子离线17054 天注册时间
银牌会员, 积分 2975, 距离下一级还需 25 积分
如何把子页面放进主页面里去啊?
UID262014在线时间 小时积分7帖子离线17054 天注册时间
新手上路, 积分 7, 距离下一级还需 43 积分
我验证了ie7正常
我验证了ie7正常，显示正常。
UID1057在线时间 小时积分39998帖子离线17054 天注册时间
02年在论坛的一个帖子里用的，当时 IE 的天下，用 CSS+HTC 的
其实关键就一句话
parent.document.all.test1.style.height=scrollH
UID464923在线时间 小时积分564帖子离线17054 天注册时间
高级会员, 积分 564, 距离下一级还需 436 积分
有个问题楼主可能没有碰到，那就是连接的子页面高度是可以变化的情况，比如有按钮1 按钮2，默认高度500px，onload的时候触发没有问题，iframe高度变为500，点按钮1高度如果变为1000px，则会出现问题，所以还是第一种方法比较实用，虽然是麻烦了点
UID11875在线时间 小时积分1915帖子离线17054 天注册时间
银牌会员, 积分 1915, 距离下一级还需 1085 积分
原帖由 [i]yangedie 于
23:27 发表
觉得原来的方法不是很好
每一个嵌进来的页面都要去修改占用了每一个嵌进来的页面的onload
所以修改了一下，把函数放在了主页面，ie6、firefox2 通过，希望ie7的网友帮忙测试
页面代码：
我用了这段代码，但问题是第一次载入的页面高度正常取得
但再次载入别的页面，onload是触发了，但scrollHeight取不到 总是为0，请问有谁解决了这个问题了？？？
----------------
OH 不好意思，应该是因为我先将iframe的display设为none了之后再去取scrollHeight，所以取到的值总为零，取消display设置就好了
[[i] 本帖最后由 猪飞飞 于
21:46 编辑 ]
UID502016在线时间 小时积分52帖子离线17054 天注册时间
初级会员, 积分 52, 距离下一级还需 148 积分
不错.其实楼住可以装IE7,然后下个IE6绿色版,这样就可以测试两个了
UID11875在线时间 小时积分1915帖子离线17054 天注册时间
银牌会员, 积分 1915, 距离下一级还需 1085 积分
IE绿色版我也下了一个，但是太不稳定了，基本上不能用。。。。。。
UID250085在线时间 小时积分2829帖子离线17054 天注册时间
银牌会员, 积分 2829, 距离下一级还需 171 积分
试了楼主的方法，在FF下是有问题的
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + &px&;
取得是网页内容高度，
一张页面高2600，另一张高600，到第二张页面明明高600，但它依然是2600
UID395781在线时间 小时积分1040帖子离线17054 天注册时间
银牌会员, 积分 1040, 距离下一级还需 1960 积分
看过这个，一直被这个问题困扰过，有时候用这个还好，有时候用这个怎么老是出错。
前两天面试，人家不让用代码，非得用css做，用css怎么弄，是知道啊？麻烦指点下好吧
UID259339在线时间 小时积分40帖子离线17054 天注册时间
新手上路, 积分 40, 距离下一级还需 10 积分
以上方法 FF3.0 不支持自适应高度！！！
UID494868在线时间 小时积分575帖子离线17054 天注册时间
高级会员, 积分 575, 距离下一级还需 425 积分
其实看了下楼主后来改到页面上来在iframe 里面加了一个onload但并不严紧，万一在点面转了链接那高度不一样是原来的高度
其实这个还不错但FF出了点儿问题，哪位大侠补充一下吧
&IFRAME id=main width=&100%& height=&100%& name=main src=&../../table.html& frameBorder=0
& && &scrolling=no&&/IFRAME&
&script language=&javascript& type=&text/javascript&&
& & function& &BodyOnLoad(){
& & & & try
& & & & & & & & if(!window.ActiveXObject)
& & & & & & & & {
& & & & & & & & //document.getElementById(&main&).style.height=document.body.scrollHeight + 20 + &px&;& && &
& & & & & & & & document.getElementById(&main&).height = document.getElementById(&main&).document.body.scrollHeight + 20 + &px&;
& & & & & & & &
& & & & & & & & }
& & & & & & & & else
& & & & & & & & {
& & & & & & & & & & & & window.document.main.resizeTo(800,window.document.main.document.body.scrollHeight+100);
& & & & & & & & }
& & & & & &
& && & & & catch(ex){}
& && & & & }
& & window.setInterval(&BodyOnLoad()&,200);
UID223320在线时间 小时积分69帖子离线17054 天注册时间
初级会员, 积分 69, 距离下一级还需 131 积分
原帖由 [i]welcome58 于
16:44 发表
试了楼主的方法，在FF下是有问题的
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + &px&;
取得是网页内容高度，
一张页面高2600，另一张高600，到第二张页面明明高600， ...
UID492565在线时间 小时积分589帖子离线17054 天注册时间
高级会员, 积分 589, 距离下一级还需 411 积分
跨域存在权限问题
UID285623在线时间 小时积分410帖子离线17054 天注册时间
中级会员, 积分 410, 距离下一级还需 90 积分
这个方法很好，可是Iframe如果链接的地址a.html为一个不可测高度的页面怎么办，例如a.html的高度是js通过屏幕高度而获得的值。这样的话，好像有点问题？
UID447251在线时间 小时积分2975帖子离线17054 天注册时间
银牌会员, 积分 2975, 距离下一级还需 25 积分
里面的20是什么意思啊？
UID411444在线时间 小时积分74帖子离线17054 天注册时间
初级会员, 积分 74, 距离下一级还需 126 积分
前阵子项目中遇到跨域问题，找了好久总算找到解决方法！
如果都属于***.com下，可以用在主页面和被引用页面都加 document.domain=“***.com' 的方法来解决
如果不属于同个大域下，就得用传递HASH NAME的方法了
主页面A.html
&iframe id=&iId& name=&iId& width=&780& src=&B/job.html& frameborder=&no& scrolling=&no&&&/iframe&
&script type=&text/javascript&&
window.onload = function()
var iObj = document.getElementById('iId');
iObjH = frames[&iId&].frames[&iframeC&].location.
iObj.style.height = iObjH.split(&#&)[1]+&px&;
被引用页 B.html
&iframe id=&iframeC& name=&iframeC& src=&http://www.***.com& frameborder=&0& height=&0&&&/iframe&
&!-- www.***.com是你主页面主页地址 --&
&script type=&text/javascript&&
hashH = document.documentElement.scrollH
urlC = document.getElementById(&iframeC&).
document.getElementById(&iframeC&).src=urlC+&#&+hashH;
Powered by}