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 操作select相关方法函数
Dec 06 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
js实现旋转木马效果
2017/03/17 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
《晏子使楚》教学反思
2014/02/08 职场文书
村居抓节水倡议书
2014/05/19 职场文书
先进员工获奖感言
2014/08/14 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
MySQL学习之基础操作总结
2022/03/19 MySQL