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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue中实现上传文件给后台实例详解
Aug 22 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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/03 咖啡文化
php5.2.0内存管理改进
2007/01/22 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python解析nginx日志文件
2015/05/11 Python
Python中的推导式使用详解
2015/06/03 Python
python开发简易版在线音乐播放器
2017/03/03 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
校庆活动方案
2014/03/31 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2015年小学开学寄语
2015/02/27 职场文书
汽车车尾标语大全
2015/08/11 职场文书
党员干部学习心得体会
2016/01/23 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
2022年显卡天梯图(6月更新)
2022/06/17 数码科技