JavaScript window.open 返回值与父窗口刷新详解
本文详解JavaScript中window.open打开子窗口后，如何利用window.opener实现数据回传及父页面刷新。涵盖普通窗口、Frame框架及跨域场景下的具体代码实现，解决关闭子窗口时父页面不刷新或报错的问题，提供兼容IE与Firefox的完整解决方案。
基础弹窗与返回值实现
a.html页面结构如下：
<form name="form1" method="post" action="">
<a href="javascript:void(null)" class="add" onClick="open('b.html','','resizable=1,scrollbars=1,status=no,toolbar=no,menu=no,width=500,height=400,left=150,top=50')">增加</a>
<input type="text" name="text1">
</form>b.html页面结构如下：
<script language="javascript" type="text/javascript">
function returnValue()
{
window.opener.document.all.text1.value=document.getElementById("returnText").value;
window.close();
}
</script>
<input type="button" name="Submit" value="提交" onclick="returnValue();">
<input name="returnText" type="text" id="returnText">
</p>
补充：window.opener 的用法
通常，window.opener 仅用于解决关闭窗口时的提示问题，但其深层用途远不止于此。实际上，window.opener 指向的是调用 window.open 方法的那个窗口对象。
在实际开发中，它常用于处理跨页面的部分提交操作，这对工作流程优化具有重要作用。
若在父窗口中打开了子页面，并希望子页面操作后自动刷新父窗口，即可使用该属性。此时，子页面中的 window.opener 等同于父窗口的 window 对象。
即父窗口的 window 对象。
若需刷新父窗口，可执行：
window.opener.location.reload();
若使用虚拟目录（如 Struts 的 *.do 请求），直接刷新可能会提示“重试”错误。
此时可改为提交表单的方式：window.opener.yourformname.submit();
即可解决该问题。
2>
应用场景中常遇到如下情况：
在窗口 A 中打开窗口 B，在窗口 B 中完成操作后关闭 B，并自动刷新窗口 A。
function closeWin(){
hasClosed = true;
window.opener.location="javascript:reloadPage();";
window.close();
}
function window.onbeforeunload(){
if(!hasClosed){
window.opener.location="javascript:reloadPage();";
}
}
</script>上述代码在关闭 B 窗口时可能会报错提示缺少 Object，修正后的代码如下：
function closeWin(){
hasClosed = true;
window.opener.location="javascript:reloadPage();";
window.opener=null;
window.close();
}
function window.onbeforeunload(){
if(!hasClosed){//如果已经执行了closeWin方法，则不执行本方法
window.opener.location="javascript:reloadPage();";
}
}
</script>
reloadPage方法如下:
function reloadPage() {
history.go(0);
document.execCommand("refresh")
document.location = document.location;
document.location.reload();
}注：为了同时支持正常关闭和强制关闭（如浏览器标签页关闭）时能捕获事件，此处使用了全局变量 hasClosed 进行状态标记。
==============================================
Frame框架下的窗口刷新处理
补充：当父窗口包含 Frame 框架时，刷新父窗口可能出现兼容性问题：
The page cannot be refreshed without resending the information.
修改后的处理代码如下：
window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
无需再执行自带的 reload() 方法，注意不要画蛇添足地添加以下语句：
window.opener.parent.document.frames.item('mainFrame').location.reload();
========================================================================================
最后，为了同时兼容刷新普通父窗口和 Frame 父窗口，完整代码如下：
function closeWin() {
hasClosed = true;
<%if(null != frame){%>
window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
<%}else{%>
window.opener.location = "javascript:reloadPage();";
<%}%>
//window.opener.top.mainFrame.location="javascript:reloadPage();";
//self.opener.frames.mainFrame.location.reload(true);
window.opener = null;
window.close();
}
function window.onbeforeunload(){
if (!hasClosed) {
<%if(null != frame){%>
window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
<%}else{%>
window.opener.location = "javascript:reloadPage();";
<%}%>
window.opener = null;
}
}window.opener 深度解析与跨域处理
window.opener 的用法
window.opener 返回的是创建当前窗口的那个窗口的引用。例如，点击 a.htm 上的链接打开 b.htm，若需在 b.htm 中输入一个值并赋予 a.htm 中 id 为 “name” 的文本框，可编写如下代码：
window.opener.document.getElementById("name").value = "输入的数据";
对于 JavaScript 中的 window.opener 机制，若理解不透彻，可能会遇到框架中的使用问题。
为何在框架中无法直接使用？弹出窗口的父窗口若位于框架内的某个页面，该如何通过弹出窗口操作该父窗口？
可尝试此写法：opener.parent.frames['frameName'].document.all.input1.value。
在 Frame 框架中，若要修改同框架下的其他页面或父框架页面，需使用 parent 对象。
window.opener 引用的是由 window.open 打开的页面的父页面。
window.frames 对象可用于引用 iframe 或 frameset 中的页面。
例如：
window.frames[0].document.getElementById('xx');
或者：
window.frames[0].document.body.innerHTML;
代码示例：
frm = window.parent.window.frames['uploadFrame'];
frm.sb(3); //sb 是uploadFrame页面里的一个函数
对于 Firefox 浏览器：
若遇到报错：parent.document.frames has no properties。
可替换为以下代码，该写法兼容 IE 和 Firefox：frm = window.parent.window.frames['uploadFrame']; 实际上，frames 集合并非挂在 document 下，而是挂在 window 对象下。
注意，修改 Frame 内页面存在限制，必须是同域下的页面，否则无法访问。
若属于同一主域但子域名不同，需在涉及的 JS 和 HTML 文件中添加以下语句：
document.domain = xxx.com [此处填写你的域名]document.getElementById('iframeid').contentWindow.document.getElementById('someelementid');
子窗口关闭时的值传递问题
问题：
在父窗口通过 window.open() 打开子窗口，并定义一个变量 i。
在子窗口中输入一个值 j，然后执行 window.opener.i=j;。
这样能成功传值。但若在子窗口最后加上 window.close();，则无法传值。
请问是否有办法解决此问题，使得在传递值后再关闭子窗口？
代码如下：
父窗口:parent.jsp
<script>
var i;
window.open('<%=contextPath%>/usermanage/newscontrol/cd.jsp);
</script>
<input type="button" onclick="alert(i)">
子窗口:cd.jsp
<script>
function subm(){
window.opener.i=5;
window.close();
}
</script>
<input type="button" onclick="subm()">最佳答案
你可以在父窗口中放置一个隐藏域：
<input id="fromChild" type="hidden" />
<input type="button"
onclick="alert(document.getElementById('fromChild').value)">
在子窗口中：
function subm(){
window.opener.document.getElementById('fromChild').value=5;
window.close();
}
这样即可实现。
<head>
<script language=javascript>
function windowclose()
{ window.opener=null;
window.close();
}
</script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="windowclose()" />
</body>
以上这篇 js 弹出窗口返回值的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部：scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
相关标签：