您的位置：首页 > 运维架构

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

2013-05-04 22:47 411 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航