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 自定义函数写法分享
Mar 30 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
Three.js快速入门教程
Sep 09 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
详解Typescript里的This的使用方法
Jan 08 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
python实现批量修改图片格式和尺寸
2018/06/07 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
课外科技活动总结
2014/08/27 职场文书
客服专员岗位职责
2015/02/10 职场文书
公司辞职信模板
2015/05/13 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers