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获取url参数值的两种方式
Sep 10 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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 函数语法介绍一
2009/06/14 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
itchat接口使用示例
2017/10/23 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Sanic框架配置操作分析
2018/07/17 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
2014年清明节寄语
2014/04/03 职场文书
经典团队口号
2014/06/06 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
关于迟到的检讨书
2015/05/06 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL