在JavaScript中捕获弹出窗口的关闭事件

Question

我需要在弹出窗口(使用window.open)关闭之前执行一些操作.

类似的东西会很好:

var new_window = window.open('some url')
new_window.onBeforeUnload = function(){ my code}

我怎样才能做到这一点？

Answer 1

只要弹出窗口URL与父页面位于同一域中,您的示例就会起作用,并且您将事件更改为全部小写:

var new_window = window.open('some url')
new_window.onbeforeunload = function(){ /* my code */ }

Answer 2

虽然接受的答案对于相同的起源是正确的,但我找到了一个跨源弹出窗口的解决方案:

var win = window.open('http://www.google.com'); 
var timer = setInterval(function() { 
    if(win.closed) {
        clearInterval(timer);
        alert('closed');
    }
}, 1000);

资料来源:atashbahar.com

对于那些考虑使用它的人.

甚至Facebook也在他们的Javascript SDK中使用这种"黑客" .

您可以通过查看其代码来验证这一点.只需.closed在https://connect.facebook.net/en_US/sdk.js中搜索即可.

Answer 3

事件名称是onbeforeunload不onBeforeUnload.JS区分大小写.

Answer 4

onbeforeunload打开事件后，需要将事件绑定到窗口。

最简单的方法是在窗口源代码中包含javascript onbeforeunload代码。

有关详细说明，请在此处和此处在Stackoverflow上参考这两个非常相似的问题。

Answer 5

onbeforeunload必须在加载弹出窗口后添加事件。例如，您可以将其添加到加载事件的末尾，如下所示；

const new_window = window.open('some url')
new_window.onload = function(){ 
    /* my code */ 
    this.onbeforeunload = function(){ /* my code */ }
}

Answer 6

您可能不想覆盖 的值onbeforeunload，因为如果弹出窗口也使用该挂钩，这会干扰弹出窗口的处理程序。

addEventListener('beforeunload', ...)代替使用。

const wnd = window.open(theUrl)
wnd.addEventListener('beforeunload', () => {
  // do stuff
})

请注意，事件还存在其他选项，例如unload和pageHide。阅读文档以了解什么事件最适合您的实施。

以供参考：

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

有关页面生命周期的概述，请参阅：

https://developers.google.com/web/updates/2018/07/page-lifecycle-api#developer-recommendations-for-each-state