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 继承机制实例
Aug 12 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JS中字符串trim()使用示例
May 26 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 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
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
Python函数装饰器实现方法详解
2018/12/22 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
历史系自荐信范文
2013/12/24 职场文书
效能监察建议书
2014/05/19 职场文书
护理专业求职信
2014/06/15 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
部门2015年度工作总结
2015/04/29 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android