文档章节

关于JavaScript中opener,parent一二

leona_lily
 leona_lily
发布于 2015/04/14 09:54
字数 817
阅读 15
收藏 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
朝阳
程序员
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
Python爬虫入门:Urllib库的高级使用

1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性。 首先,打开我们的...

天才小熊猫QAQ
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
0
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
0
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1
shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部