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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
用javascript实现自定义标签
May 08 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
使用JS动态显示文本
Sep 09 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
小程序外卖订单界面的示例代码
Dec 30 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
如何利用React实现图片识别App
Feb 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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JavaScript DOM事件(笔记)
2015/04/08 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
pycharm修改file type方式
2019/11/19 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python常用外部指令执行代码实例
2020/11/05 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
长青弘远的面试题
2012/06/09 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
创先争优承诺书范文
2014/03/31 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
银行竞聘报告范文
2014/11/06 职场文书
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle