js中opener与parent的区别详细解析


Posted in Javascript onJanuary 14, 2014

opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面。

parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。在JS中,window.opener只是对弹出窗口的母窗口的一个引用。比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。

假如这个引用失败,那么将返回null。所以在调用opener的对象前,要先判断对象是否为null,否则会出现“对象为空或者不存在”的JS错误。

示例:
aa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span id="name"></span>
<input type="button" " value="弹窗" onclick="window.open('bb.html')" />
</body>
</html

bb.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head>
 <body>
 <input type="text"  id="inputValue"/>
 <input type="button"  value="添加" onclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
 </body>
 </html>

window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了aa.htm上的一个链接而打开了bb.htm,然后我们打算在bb.htm上输入一个值然后赋予aa.htm上的一个id为“name”的textbox中,就可以

写为:
window.opener.document.getElementById("name").value = "输入的数据";
window.opener.document.getElementById("name").innerHTML= "输入的数据";

Javascript 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 #Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 #Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 #Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 #Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 #Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 #Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 #Javascript
You might like
短波的认识
2021/03/01 无线电
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python logging模块的使用
2020/09/07 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
C语言基础笔试题
2013/04/27 面试题
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
开天辟地观后感
2015/06/09 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android