文档章节

关于JavaScript中opener,parent一二

leona_lily
 leona_lily
发布于 2015/04/14 09:54
字数 817
阅读 16
收藏 1

来到新公司改了一个bug。

需求描述:弹窗弹出后点击弹窗的提交按钮后,弹窗的父页面中checkbox已经选择的选项清空回到初始状态;

关于这一点,大概知道是要在子窗口中来操作父窗口的元素内容,所以上网搜索了一些,下面罗列出觉得有实际意义的解答方案(总结出来哒)。

1、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= "输入的数据";


2、 附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系:Windwo对象→Parent对象 →Frame对象         →Document对象→Form对象,如:parent.frame1.document.forms[0].elements[0].value;


问题:在一个页面嵌入框架<iframe>,然后在框架中使用jvascript脚本:parent.xx.value='xxxxx'; 在IE中可以正常看到赋值,但是在firefox中则不能完成赋值。请问在firefox中调用父框架的对象应该是哪个,是否和IE兼容?
解答:window.parent.document.form名.xx.value='xxxxx';   window可省略。
parent.document.form名.xx.value='xxxxx';   parent.document.getElementById("xx").value='xxxxx';


window.opener 是window.open 打开的子页面调用父页面对象
opener:对打开当前窗口的window对象的引用,如果当前窗口被用户打开,则它的值为null。
self:自引用属性,是对当前window对象的应用,与window属性同义。
self代表自身窗口,opener代表打开自身的那个窗口,比如窗口A打开窗口B。如果靠window.open方法,则对于窗口B,self代表B自己,而opener代表窗口A。

© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 99
码字总数 43341
作品 0
朝阳
程序员
私信 提问
window.parent,top,window.self,parent,opener

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。 wind...

inidcard
09/20
0
0
iframe多层嵌套时获取元素总结

父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; (嵌套三层,或者更多时) $('iframe').contents().find('iframe').contents().find(...

sjzmlb
2015/06/30
0
0
JS iframe父子页面元素调用方法 | window parent top opener 解释

iframe 父窗口调用子窗口 var hasMore = parent.document.getElementByIdxxxx("hasMore").value; 子窗口调用父窗口 document.frames["ifrmBoxFrame"].me.preLoadBoxGrid(); window.frames["......

underA
2013/03/05
0
1
关于js中window.location.href,location.href,parent....

"window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是...

^6^|^6^
2011/12/14
0
0
关于qq空间另类点赞方法的尝试失败,求大神指导

尝试用其他方法对qq空间的说说点赞 1.用chrome浏览器,javascript console 在控制台输入document.getElementById("#id号码") 控制台返回null...我确定id是对的,用浏览器调试工具Element嗅探...

红薯说愿闻其翔
2014/04/24
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx-使用简单总结

下载nginx:http://nginx.org/en/download.html 下载后解压 有很多种方法启动nginx (1)直接双击nginx.exe, 双击后一个黑色的弹窗一闪而过 (2)打开cmd命令窗口,切换到nginx解压目录下, 输入...

Java搬砖工程师
16分钟前
3
0
通过修改控制文件scn推进数据库scn

在数据库遇到ora-600[2662],scn不一致(又没有日志)的时候,我们首先想到的就是去推进数据库的scn,让数据库能够open起来,抢救其中的数据,但是由于各种乱用的情况,oraclescn的pach出来后(11.2...

突突突酱
17分钟前
1
0
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

壹峰
18分钟前
1
0
前端缩短数字的长度解决方案[10进制转化为64进制]

function string10to64 (number) { var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_$'.split(''), radix = chars.length, qutient =......

未来cc
18分钟前
1
0
十年架构师不到400行手写一个Spring MVC

首先,我们先来介绍一下Spring的三个阶段,配置阶段、初始化阶段和运行阶段(如图): 配置阶段:主要是完成application.xml配置和Annotation配置。 初始化阶段:主要是加载并解析配置信息,...

小刀爱编程
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部