脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → window.opener

window.opener用法和用途实例介绍

 更新时间：2013年08月19日 16:03:00   作者：  
window.opener，是通过window.open打开子窗体的父窗体的引用，下面为大家详细介绍下其具体的使用方法，感兴趣的朋友可以参考下
window.opener，是通过window.open打开子窗体的父窗体的引用。

比如在父窗体parentForm里面，通过window.open("subForm.html"),那么在subform.html中window.opener就代表parentForm。既然在子窗体中能够拿到父窗体的引用，那么就可以在子窗体中设置父窗体的字段值或者调用js方法。
实例：添加人员信息时，其中的机构信息通过子窗体完成输入
父亲窗体，用于添加人员信息。

子窗体完成输入后，机构信息（id、name）自动填充到父窗体的orgId、orgName域
 
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域
 
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();
}
}

选择机构信息后的结果
 
完成机构信息（id、name）的输入了，只是id在隐藏域中，看不到而已。
小结
说到对父窗体的引用，除了window.opener，就是window.parent了。window.opener是用于通过window.open方式打开子窗体，而window.parent是用于通过iframe方式打开子窗体。
您可能感兴趣的文章:

相关文章

  • 微信小程序实现带滑块的进度条

    微信小程序实现带滑块的进度条

    这篇文章主要为大家详细介绍了微信小程序实现带滑块的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序图片自适应实现解析

    微信小程序图片自适应实现解析

    这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 一些你可能不熟悉的JS知识点总结

    一些你可能不熟悉的JS知识点总结

    这篇文章主要为大家介绍一下JS中一些你可能不熟悉的知识点给整理一下，学习js的朋友可以看一下
    2019-03-03
  • 前端冒泡排序算法详解及实战案例

    前端冒泡排序算法详解及实战案例

    这篇文章主要介绍了前端冒泡排序算法的相关资料,冒泡排序是一种简单的排序算法,通过比较相邻元素并交换位置,实现元素排序,该算法的时间复杂度为O(n^2),空间复杂度为O(1),具有稳定性,适用于小规模数据集和对稳定性要求高的场景,需要的朋友可以参考下
    2024-10-10
  • 引用其它js时如何同时处理多个window.onload事件

    引用其它js时如何同时处理多个window.onload事件

    引用其它js时，其js却使用了window.onload事件，这样的话，引入的页面的onload事件就有可能执行不了，那么该如何解决呢？祥看下文
    2014-09-09
  • js前端技巧之图片格式转换(File、Blob、base64)

    js前端技巧之图片格式转换(File、Blob、base64)

    这篇文章主要给大家介绍了关于js前端技巧之图片格式转换(File、Blob、base64)的相关资料,主要记录一下比较常见的图片格式（File、Blob、base64）在不同的场景他们之间的相互转换的方法,需要的朋友可以参考下
    2023-04-04
  • Javascript 更新 JavaScript 数组的 uniq 方法

    Javascript 更新 JavaScript 数组的 uniq 方法

    2008-01-01
  • 取键盘键位ASCII码的网页

    取键盘键位ASCII码的网页

    取键盘键位ASCII码的网页...
    2007-07-07
  • JavaScript按值删除数组元素的方法

    JavaScript按值删除数组元素的方法

    这篇文章主要介绍了JavaScript按值删除数组元素的方法,涉及javascript操作数组的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 10个功能强大的JavaScript动画库分享

    10个功能强大的JavaScript动画库分享

    动画,从人群中脱颖而出、吸引访客注意力的绝佳方式,本文将给大家分享10 个功能强大的 JavaScript 动画库,有了这 10 个功能强大的 JavaScript 库,创建动画再简单不过了,感兴趣的同学可以参考阅读
    2023-09-09

最新评论