为什么我的弹出窗口 window 在重新加载后会丢失其 beforeunload 事件？

Question

我有一个可以打开新弹出窗口的小应用程序。我将 window 存储在一个变量中：

popup = window.open("sites/display.html", "_blank");

之后我添加了一个 beforeunload 事件监听器：

$(popup).on('beforeunload', function(){
    // Do something
});

然后我用一个按钮重新加载 window：

popup.location = popup.location;

之后，如果我关闭 window，卸载前的事件将不再触发。我认为这与重新加载有关，因为如果我不重新加载页面，一切正常。

我该如何解决这个问题，以便在每次 window 关闭时触发该事件？

我使用的确切代码：

function startClock(allowRestart) {
    saveSettings(allowRestart);
    if ($("#separated-display").is(":checked")) {
        // Separated mode activated
        if (popup == undefined) {
            openPopup();
        } else {
            if (popup.closed) {
                openPopup();
            }else{
                popup.location.reload();
            }
        }
    } else {
        // Separated mode deactivated
        if (popup != null && popup.closed == false) {
            $(popup).unbind();
            popup.close();
        }
        window.location = "sites/display.html"; // Open the clock in same window
    }
}

function openPopup(){
    // Open new popup window
    popup = window.open("sites/display.html", "_blank");

    // TO-DO: Fix event not fired after 1. window reload 2. window close
    popup.addEventListener('beforeunload', function(){
        console.log("unload");
    });
}

Answer 1

当您尝试使用 window.open() 访问相同来源（使用相对路径）window 时，不应显示访问错误。

popup = window.open("/sites/display.html", "_blank")

popup 变量将引用新创建的 window，它是一个表示 WindowProxy 对象的薄包装器，它确实具有 window 的所有可用功能。

当页面重新加载时，一切都设置为默认值，并且 window 失去了之前设置的属性。因此，先前附加的 unload 事件不再附加。其他事件也会发生这种情况。

因此这里的问题是事件被附加到弹出窗口 window 仅在打开弹出窗口时发生一次，它在页面重新加载时重置。前进的最佳方法是在专门加载到 sites/display.html 页面的 js 文件中添加 unload 事件。在那里，每次 sites/display.html 页面加载时，您都可以访问新的 window 对象并在 window.load / document.ready 中附加事件（根据您的用例）。

您将无法在调用页面重新加载之前或之后附加要弹出的事件，因为您当前正在执行此操作，因为属性如果您尝试设置它 before/after 页面重新加载，因为它可能会异步执行。

注意：

您应该使用 window.location 公开的 reload() 函数而不是更新位置属性。因为更新属性不会跳过浏览器缓存。

popup.location.reload()

对 window.open 的支持是 unknown for most browsers，尽管我能够在 Chrome 84 上使用它。

为什么我的弹出窗口 window 在重新加载后会丢失其 beforeunload 事件？

Why does my popup window lose its event beforeunload after a reload?

javascript

jquery

window

event-handling