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 相关文章推荐
常用js字符串判断方法整理
Oct 18 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 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
php4的彩蛋
2006/10/09 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
详解jquery选择器的原理
2017/08/01 jQuery
node.js 发布订阅模式的实例
2017/09/10 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python 两个数据库postgresql对比
2019/10/21 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
Shell如何接收变量输入
2016/08/06 面试题
好的演讲稿开场白
2013/12/30 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
城管个人总结
2015/02/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
导游词之上海豫园
2019/10/24 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
深入理解pytorch库的dockerfile
2022/06/10 Python