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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
js+css3实现旋转效果
Jan 20 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python的互斥锁与信号量详解
2019/09/12 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
护理专业自荐信
2013/12/03 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis