logo标签列表

打开弹窗并在关闭弹窗时刷新父页面

javascripthtmldom-events
102

我用 JavaScript 的 window.open 打开了一个弹出窗口，当我关闭这个弹出窗口时，我想刷新父页面。（通过 onclose 事件？）我该如何做到？

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
1
请查看此链接：http://stackoverflow.com/questions/18321323/submit-form-reload-parent-and-close-child/36855748#36855748，可能会对某些人有所帮助。 - NoNaMe
11个回答
248

你可以使用 'window.opener' 来访问父窗口，因此在子窗口中编写以下内容：

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>
我不知道window.opener，谢谢！我总是将调用者窗口放在子窗口的contentWindow变量中。 :-/ - Kijewski
6
如果您无法控制子页面（例如OAuth流程）中的JavaScript，则需要像@Zuul的解决方案一样使用setInterval检查popupWindow.closed。 - jchook
38

弹出窗口没有任何可供监听的关闭事件。

另一方面，当窗口关闭时，会设置一个名为 closed 的属性，该属性的值为 true。

您可以设置一个计时器来检查该属性，操作如下：

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000);

请查看这个可工作的Fiddle示例！

1
我不想使用定时器！还有别的想法吗？ - ArMaN
1
有点hackish，但我认为使用计时器在所有浏览器中都能最好地工作。 - Kijewski
这也是最佳解决方案，如果弹出窗口在关闭之前有几页内容，因为onunload事件仅在用户从第一页导航离开后触发。 - AntonChanning
由于控制在窗口打开器的一侧，请将 alert('closed'); 替换为 location.reload();。 - Pepe N O
14

在您的子页面上，放置以下内容：

<script type="text/javascript">
    function refreshAndClose() {
        window.opener.location.reload(true);
        window.close();
    }
</script>

并且

<body onbeforeunload="refreshAndClose();">

但作为良好的用户界面设计，您应该使用一个关闭按钮，因为它更加用户友好。请参见下面的代码。

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />
当弹出窗口关闭时，而不是用户单击按钮刷新页面并关闭弹出窗口。 - gengkev
@gengkev，我知道OP想要将事件附加到窗口关闭，但我认为使用按钮是更好的UI设计。不过，我已经包含了两种代码，请给予建议。 - Ray Cheng
我使用了 <body onbeforeunload="refreshAndClose();"><script type="text/javascript"> function refreshAndClose() { window.opener.location.reload(true);
} self.close(); </script> - steve0nz
4
我使用这个：

<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}

</script>
<script type="text/javascript">
function refreshAndClose() {
    window.opener.location.reload(true);
    window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>

当窗口关闭时，它会刷新父窗口。
2
在我的情况下，当单击父页面上的链接按钮时，我打开了一个弹出窗口。 使用

关闭子窗口并刷新父窗口。
window.opener.location.reload();

在子窗口中引起重新打开子窗口（可能是由于视图状态导致的，如果我错了，请纠正我）。因此，我决定不在父级重新加载页面，并将相同的URL再次分配给它来加载页面。
为了避免在关闭弹出窗口后再次打开弹出窗口，这可能会有所帮助。
window.onunload = function(){
    window.opener.location = window.opener.location;};
2
"window.open将返回对新创建窗口的引用，前提是打开的URL遵守同源策略。"
"这应该可以工作："
function windowClose() {
    window.location.reload();
}

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​
如果用户可以在打开的窗口中跟随链接，这种方法将不起作用。我相当确定，在加载目标 URL 之前会抛出 unload 事件，因为你会离开 about:blank。（+1 提到 SOP） - Kijewski
1

如果您的应用程序在支持HTML5的浏览器上运行，您可以使用postMessage。那里提供的示例与您的相似。

“否则，您无法在不同的窗口之间进行通信。”是错误的。虽然这种技术仍然可行，但我建议采用@Moses的答案。 - gengkev
如果您提供一个小例子，甚至会得到+1；-) - Kijewski
没事。但是我认为window.opener在IE上不行。我会试一下。 - Chris Li
1
@kay，在IE7、8中运行得很好。非常好，我以前不知道。给Moses加1。 - Chris Li
1
@ArMaN：http://jsfiddle.net/8c2e4/10/，使用window.opener。您可以使用此来测试您的环境。 - Chris Li
1
尝试这个。
        self.opener.location.reload();

打开当前窗口的父级并重新加载位置。
0

在步骤之后，您可以使用父命令（父窗口）访问主页面，然后您可以做任何事情...

    function funcx() {
        var result = confirm('bla bla bla.!');
        if(result)
            //parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
            parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
    }
0
以下代码将在关闭后刷新父窗口：
function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接