检查弹出窗口是否关闭

Question

我正在打开一个弹出窗口

var popup = window.open('...', '...');

此 javascript 在控件中定义。然后从网页使用该控件。我想在弹出窗口关闭时重新加载打开此弹出窗口的页面。

基本上用户需要在弹出窗口中输入一些面额并提交。然后将这些面额存储在用户会话中。当用户单击“提交”时，我将关闭弹出窗口，同时想要刷新打开此弹出窗口的窗口以重新获取用户在弹出窗口中所做的更新。

我正在努力做

var popup = window.open('...','...');
if (popup) {
  popup.onClose = function () { popup.opener.location.reload(); }
}

我想我做错了，因为这似乎不起作用。

为了测试这个问题，我什至尝试过这个，但没有出现警报。

if (popup) {
  popup.onclose = function() { 
    alert("1.InsideHandler");
    if (opener && !opener.closed) { 
      alert("2.Executed.");
      opener.location.reload(true); 
    } else { 
      alert("3.NotExecuted.");
    }
  }
}

Answer 1

这是我的建议（更新为新代码）

在弹出窗口中您应该有：

const reloadOpener = () => {
  if (top.opener && !top.opener.closed) {
    try {
      opener.location.reload(1); 
    }
    catch(e) {
    }
    window.close();
  }
}
window.addEventListener("unload", () => {
  reloadOpener();
})

<form action="..." target="hiddenFrame">
</form>
<iframe style="width:10px; height:10px; display:none" name="hiddenFrame" src="about:blank"></iframe>

然后假设同源，服务器进程可以返回

<script> top.close(); </script>

注意：

location.reload

采用布尔值，如果您不想从缓存加载，请添加 true 如

opener.location.reload(1);

Answer 2

同源弹窗的解决方案

如果您的弹出窗口与开启器来自同一来源，您可以将事件侦听器附加到弹出窗口，如下所示：

const popup = window.open('...', '...');

popup.window.addEventListener('load', () => {
    popup.window.addEventListener('unload', () => {
        console.log('> Popup Closed');
        // window.location.reload();
    });
});

请注意，加载弹出窗口后需要添加卸载事件侦听器。这是因为卸载事件也会在弹出窗口中的页面加载时触发。

不同来源弹窗的解决方案

如果您的弹出窗口与 opener 的来源不同，当您尝试添加侦听器时，您将收到如下错误：

Blocked a frame with origin from accessing a cross-origin frame.

出于安全原因，您只能从 opener 和 opener 访问一组有限的属性打开的窗户。 更多相关信息这里。

解决方案1

如果您有权访问弹出窗口中的源，则可以在弹出窗口中创建卸载事件侦听器并调用

window.opener.location.replace(OPENER_URL)

。这样做的缺点是您需要打开者的 URL。您可以将 OPENER_URL 作为查询字符串传递到弹出窗口，而不是硬编码。

注意，跨域场景下不允许使用

window.opener.location.reload()

，所以必须使用

.replace(OPENER_URL)

解决方案2

您可以简单地在打开器中创建一个间隔，以使用 window.close 属性定期检查窗口是否打开。

const popup = window.open('...', '...');

const interval = setInterval(() => {
    if (popup.closed) {
        clearInterval(interval);
        console.log('> Popup Closed');
        // window.location.reload();
    }
}, 500);

这可能是最灵活的解决方案。 PayPal API 也将其用于支付弹出窗口（带有用于关闭属性的填充）

Answer 3

试试这个：

window.opener.location.reload(true);

或

关闭前进入弹出窗口

window.opener.location.href = window.opener.location.href;
window.close();

Answer 4

好的，你要做的如下。

创建一个方法“setWindowObjectInParent”，然后在弹出窗口中调用该方法。 var 弹出窗口；

function setWindowObjectInParent(obj)
{
popupwindow = obj;
}

现在你有了一个可以调用焦点的对象。

所以在弹出窗口中添加

$(window).unload(function(){
window.opener.setWindowObjectInParent();
});
window.opener.setWindowObjectInParent(window);

这将在弹出窗口关闭时取消设置 obj，并在打开时设置对象。

因此您可以检查弹出窗口是否已定义，然后调用焦点。

Answer 5

相反，您应该使用像这样的模式对话框

var popup = window.showModalDialog("page.html", "", params);

这将使您停在这一行，直到对话框关闭。

在 page.html 中的某个位置，您可以编写一些 javascript 来设置

window.returnValue

，这将放置弹出变量。

更新

Window.showModalDialog() 现已过时。