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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
深入理解ES6之数据解构的用法
Jan 13 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
原生js实现密码强度验证功能
Mar 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中文汉字验证码
2007/04/08 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
json的使用小结
2016/06/08 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python操作xml文件详细介绍
2014/06/09 Python
简单实现python爬虫功能
2015/12/31 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python 修改列表中的元素方法
2018/06/26 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python多进程间通信代码实例
2019/09/30 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
工作所在部门证明
2014/09/21 职场文书
项目投资意向书范本
2015/05/09 职场文书
贷款担保书范本
2015/09/22 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏