window.opener用法和用途实例介绍


Posted in Javascript onAugust 19, 2013

window.opener,是通过window.open打开子窗体的父窗体的引用。

比如在父窗体parentForm里面,通过window.open("subForm.html"),那么在subform.html中window.opener就代表parentForm。既然在子窗体中能够拿到父窗体的引用,那么就可以在子窗体中设置父窗体的字段值或者调用js方法。
实例:添加人员信息时,其中的机构信息通过子窗体完成输入
父亲窗体,用于添加人员信息。

子窗体完成输入后,机构信息(id、name)自动填充到父窗体的orgId、orgName域
window.opener用法和用途实例介绍 
html代码

<tr> 
<tdclass="tdEditLabel">机构</td> 
<tdclass="tdEditContent" colspan="3"style="width:400px;text-align:left"> 
<input type="hidden"name="orgId" id="orgIdId"> 
<!-- disabled修饰的内容 不提交 --> 
<input type="text"name="orgName" disabled="disabled"id="orgNameId"> 
<input type="button"name="selectOrgButton" value="选择机构" 
onclick="openWin('org.do?select=true','selectorg',800,500,1)"> 
</td> 
</tr>

JS代码
/* 
*打开新窗口(通过window.open()) 
* f:链接地址 
* n:窗口的名称 
* w:窗口的宽度 
* h:窗口的高度 
* s:窗口是否有滚动条,1:有滚动条;0:没有滚动条 
*/ 
functionopenWin(f,n,w,h,s){ 
sb= s == "1" ? "1" : "0"; 
l= (screen.width - w)/2; 
t= (screen.height - h)/2; 
sFeatures= "left="+ l +",top="+ t +",height="+ h+",width="+ w 
+",center=1,scrollbars=" + sb +",status=0,directories=0,channelmode=0"; 
openwin= window.open(f , n , sFeatures ); 
if(!openwin.opener) 
openwin.opener= self; 
openwin.focus(); 
returnopenwin; 
}

子窗体,供选择机构信息。

当选择后(通过单击radio),机构信息(id、name)将填充到父窗体的orgId、orgName域
window.opener用法和用途实例介绍 
html代码

<!--列表数据栏 --> 
<c:iftest="${!empty pm.datas}"> 
<c:forEachitems="${pm.datas }" var="org"> 
<trbgcolor="#EFF3F7" class="TableBody1"onmouseover="this.bgColor = '#DEE7FF';"onmouseout="this.bgColor='#EFF3F7';"> 
<td align="center"vAlign="center"> 
<input type="radio"onclick="selectOrg('${org.id }','${org.name }')"> 
</td> 
<tdalign="center" vAlign="center">${org.id}</td> 
<tdalign="center" vAlign="center"><ahref="org.do?parentId=${org.id }&select=true">${org.name}</a></td> 
<tdalign="center" vAlign="center">${org.sn }</td> 
<tdalign="center" vAlign="center">${org.parent.name}</td> 
</tr> 
</c:forEach> 
</c:if>

JS代码
functionselectOrg(id,name){ 
if(window.opener){ 
window.opener.document.all.orgIdId.value= id; 
window.opener.document.all.orgNameId.value= name; 
window.close(); 
} 
}

选择机构信息后的结果
window.opener用法和用途实例介绍 
完成机构信息(id、name)的输入了,只是id在隐藏域中,看不到而已。
小结
说到对父窗体的引用,除了window.opener,就是window.parent了。window.opener是用于通过window.open方式打开子窗体,而window.parent是用于通过iframe方式打开子窗体。
Javascript 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 #Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 #Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 #Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 #Javascript
详解JavaScript函数绑定
Aug 18 #Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 #Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
php 中序列化和json使用介绍
2013/07/08 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
介绍一下grep命令的使用
2015/06/12 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
户外亲子活动策划方案
2014/02/07 职场文书
幼儿教师工作感言
2014/02/14 职场文书
体育教学随笔感言
2014/02/24 职场文书
电子商务求职信
2014/06/15 职场文书
机关党员公开承诺书
2014/08/30 职场文书
答辩状格式范本
2015/05/22 职场文书
活动宣传稿范文
2015/07/23 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python