文档章节

关于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
博文 96
码字总数 37848
作品 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
爬取微信文章的小代码写入一个本地网页时需要注意声明html文档编码

<meta http-equiv="content-type" content="txt/html; charset=utf-8" /> 写入一个新的html页时一定要在head标签里加上声明文档编码,不然简体字乱码 import urllib.request import re impo......

Lnnjoy
06/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux使用ntfs-3g操作ntfs格式硬盘

Linux内核目前只支持对微软NTFS文件系统的读取。 NTFS-3G 是微软 NTFS 文件系统的一个开源实现,同时支持读和写。NTFS-3G 开发者使用 FUSE 文件系统来辅助开发,同时对可移植性有益。 安装 ...

linuxprobe16
今天
1
0
kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
7
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
18
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部