iframe和父页,window.open打开页面之间的引用
来源:互联网 发布:linux shell定义数组 编辑:程序博客网 时间:2024/06/07 09:49
iframe和父页,window.open打开页面和被打开页面之间的关系可以通过下面的对象获取到
1)通过iframe加载的,在iframe中用parent对象得到父页window作用域,如果iframe中又加载了iframe,在最里层的iframe中需要重复调用parent.parent得到其上一级iframe的引用。如果是直接引用最顶级的父页作用域,可以使用top对象。
通过上面的介绍知道了关系之后,就很容易从一个页面更新到其他通过window.open或者iframe嵌套的子页面或者父页面了。
我们现在要做的就是:
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>
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的作用域。如
3)父页面aaa.html中使用 var win=window.open("xxx.html"),win就是子页面xxx.html的window作用域,xxx.html中使用opener对象得到打开这个父页面的window作用域,通过window.opener.变量名/函数名来获取父页面的变量或函数。如果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的作用域了
通过上面的介绍知道了关系之后,就很容易从一个页面更新到其他通过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>
0 0
- iframe和父页,window.open打开页面之间的引用
- iframe和父页,window.open打开页面之间的引用
- jquery 打开页面window.location和window.open的区别
- javascript 打开页面window.location和window.open的区别
- window.open打开的页面向父页面传值
- window.open打开的窗体和父窗体之间互传参数
- [转]使用window.open替代window.ShowModalDialog,完成子页面和父页面之间的传值
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- 总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
- window.open 打开页面的方式
- Web页面打开新的窗体之window.showModalDialog和window.open
- C++ 浅谈emplace_back及误区
- RFID传输原理
- Netty之BIO(同步阻塞IO)、PIO(伪异步阻塞IO)、NIO(异步非阻塞IO)、AIO(异步非阻塞IO)、Netty
- 进程结束时shell提示符的出现
- jquery实现文字逐字逐句显示的插件
- iframe和父页,window.open打开页面之间的引用
- Lab 1
- 【转】redis windows环境搭建
- IOS9.0 中的一些错误
- Java线程:新特征-线程池
- 网站上传文件的冗余处理
- Redis 环境搭建
- protractor installation problems on Windows 2012 Server
- 视频教程资源分享