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 相关文章推荐
基于jquery的滑动样例代码
Nov 20 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
利用js canvas实现五子棋游戏
Oct 11 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/10/09 PHP
php中explode与split的区别介绍
2012/10/03 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
angular4自定义组件详解
2017/09/28 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
JS实现密码框效果
2020/09/10 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python外星人入侵游戏编程完整版
2020/03/30 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Django中的AutoField字段使用
2020/05/18 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
教师岗位职责
2013/11/17 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
社区党员干部承诺书
2015/05/04 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python