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代码,用以防止图片撑破页面
Mar 12 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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语法(1)
2006/10/09 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
学院领导推荐信
2013/10/30 职场文书
社区学习十八大感想
2014/01/22 职场文书
财务部经理岗位职责
2014/02/03 职场文书
关于环保的建议书
2014/05/12 职场文书
另类冲刺标语
2014/06/24 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
后勤个人工作总结
2015/02/28 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers