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.js的Ajax对象
Sep 23 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
jQuery表单事件实例代码分享
Aug 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遍历数组的4种方法总结
2014/07/05 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python复制文件到指定目录的实例
2018/04/27 Python
python 拼接文件路径的方法
2018/10/23 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python版百度语音识别功能
2019/07/09 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
10条PHP编程习惯
2014/05/26 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
老师自我鉴定范文
2013/12/25 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
公司建议书怎么写
2014/05/15 职场文书
中药学专业求职信
2014/05/31 职场文书
企业年度评优方案
2014/06/02 职场文书
先进人物事迹材料
2014/12/29 职场文书