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 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
Python学习资料
2007/02/08 Python
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
英语专业学生的自我评价
2013/12/30 职场文书
办理信用卡工作证明
2014/01/11 职场文书
一岗双责责任书
2014/04/15 职场文书
公司承诺书怎么写
2014/05/24 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
男性健康日的活动方案
2014/08/18 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python