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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 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
php常用ODBC函数集(详细)
2013/06/24 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python封装shell命令实例分析
2015/05/05 Python
python3实现磁盘空间监控
2018/06/21 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
感恩节活动策划方案
2014/05/16 职场文书
跳槽求职信范文
2014/05/26 职场文书
节水标语大全
2014/06/11 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
培养联系人考察意见
2015/06/01 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python