iframe和父页,window.open打开页面之间的引用

本文介绍了如何通过iframe和window.open在不同页面间进行JavaScript方法调用。包括如何在父页面和子页面之间传递数据,以及如何从一个页面更新到另一个页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到

   1)通过iframe加载的,在iframe中用 parent对象得到父页window作用域,如果iframe中又加载了iframe,在最里层的iframe中需要重复调用 parent.parent得到其上一级iframe的引用。如果是直接引用最顶级的父页作用域,可以使用top对象。

  2)父页使用document.getElementById("iframe的id").contentWindow得到iframe的window作用域,如果iframe还继续嵌套了iframe,则还需要继续执行.getElementById("iframe的id").contentWindow操作才能得到内层iframe的作用域。如

var ifrWin=document.getElementById("iframe的id").contentWindow.getElementById("再次被嵌套的iframe的id").contentWindow;

3)aaa.html中使用 var win=window.open("xxx.html"),win就是xxx.html的window作用域,xxx.html中使用opener对象得到打开这个页面的window作用域。如果xxx.html又打开了bbb.html,那么bbb.html中使用opener.opener得到aaa.html作用域,aaa.html要想得到bbb.html作用域,那么xxx.html需要保存打开bbb.html的作用域如var win=window.open("bbb.html"),那么aaa.html通过win.win就得到bbb.html的作用域了

var win=null;
function jplayer( id ){

      win = window.open("testIframe.do", "jk_play");
      win.document.getElementById('test').style.color='red';
      win.document.getElementById("myTest").value = "Hello World";
      win.ff( id );
}

//test、myTest是打开testIframe.do页面的id,ff( id )是函数


  通过上面的介绍知道了关系之后,就很容易从一个页面更新到其他通过window.open或者iframe嵌套的子页面或者父页面了。

  备注:chrome浏览器下本地测试iframe不能互访,具体参考:chrome浏览器iframe parent.document为undefined


http://www.coding123.net/article/20121205/iframe-parent-window.open-opener-interrelation.aspx

调用iframe中父页面/子页面中的JavaScript方法

说明:假设有2个页面,index.html和inner.html。其中index.html中有一个iframe,这个iframe的src指向inner.html。
我们现在要做的就是:
1.在index.html中调用inner.html上的一个js方法
2.在inner.html中调用index.html上的一个js方法

实现代码如下:

index.html

1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is index's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightblue;">
11.This is index page.
12.<input type="button" value="run index's function" onclick="ff();" />
13.<input type="button" value="run inner page's function" onclick='window.frames["childPage"].ff();' />
14.</div>
15.<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
16.</body>
17.</html>


inner.html

1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is inner page's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightgreen;">
11.This is inner page.
12.<input type="button" value="run index's function" onclick='parent.window.ff();' />
13.<input type="button" value="run inner page's function" onclick="ff();" />
14.</div>
15.</body>
16.</html>

http://hi.baidu.com/zh_m_zhou/item/0bf288d8c436ef19d68ed0e2


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值