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.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
js获取url页面id,也就是最后的数字文件名
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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python 字典访问的三种方法小结
2019/12/05 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
自荐书模板
2013/12/19 职场文书
商务会议邀请函
2014/01/09 职场文书
医学专业自荐信
2014/06/14 职场文书
职工年度考核评语
2014/12/31 职场文书
优秀员工自荐书
2015/03/06 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
介绍信范文大全
2015/05/07 职场文书