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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
linux iconv方法的使用
2011/10/01 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python中函数的用法实例教程
2014/09/08 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
初步探究Python程序的执行原理
2015/04/11 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python函数式编程
2017/07/20 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python3实现多线程聊天室
2018/12/12 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
软件设计的目标是什么
2016/12/04 面试题
房产转让协议书
2014/04/11 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js