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 相关文章推荐
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 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函数utf8转gb2312编码
2006/12/21 PHP
2014过年倒计时示例
2014/01/31 PHP
详解js异步文件加载器
2016/01/24 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python中使用while循环的实例
2019/08/05 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
用Python写一个自动木马程序
2019/09/17 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
中层竞聘演讲稿
2014/01/09 职场文书
军训考核自我鉴定
2014/02/13 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
廉洁教育学习材料
2014/05/19 职场文书
2015年服务员工作总结
2015/04/08 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
欧元符号 €
2022/02/17 杂记
Python读取和写入Excel数据
2022/04/20 Python