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

Capture the close event of popup window in JavaScript

本文关键字：事件 窗口 JavaScript      更新时间：2023-09-26

在弹出窗口（使用window.open）关闭之前，我需要执行一些操作。

类似的东西会很好：

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

我怎样才能做到这一点？

虽然相同来源的公认答案是正确的，但我找到了跨来源弹出窗口的解决方案：

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中使用这种"黑客"。

您可以通过查看他们的代码来验证这一点。只需在中搜索.closedhttps://connect.facebook.net/en_US/sdk.js.

只要弹出窗口url与父页面在同一域中，并且您将事件更改为全小写：，您的示例就会工作

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

事件名称是onbeforeunload，而不是onBeforeUnload。JS区分大小写。

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

最简单的方法是让javascript在窗口源代码中加载代码。

有关详细的解释，请参阅这里和这里关于Stackoverflow的这两个非常相似的问题。

onbeforeunload事件必须在加载弹出窗口后添加。例如，您可以在其加载事件结束时添加它，如下所示；

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

您可能不想覆盖onbeforeunload的值，因为如果popout也使用该钩子，这将干扰它的处理程序。

请改用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-每个状态的建议

import { useEffect, useRef } from "react";
const usePopupWindow = ({
  url,
  onPopupClose,
  popupProperties = "width=200,height=200",
}) => {
  const timer = useRef();
  const handleWindowPopup = () => {
    const windowPopup = window.open(url, "popup", popupProperties);
    timer.current = setInterval(() => {
      if (windowPopup.closed) {
        clearInterval(timer.current);
        onPopupClose();
      }
    }, 1000);
  };
  useEffect(() => {
    return () => clearInterval(timer.current);
  }, []);
  return { handleWindowPopup };
};
export default usePopupWindow;

为React用例创建了这个钩子

如上所述，您需要在窗口打开后将onbeforenload事件绑定到窗口。

请参阅其他线程中的示例：https://stackoverflow.com/a/25989253/578275.

var new_window = window.open('some_url')

您也可以检查new_window.window是否为null。但您需要使用setTimeout或setInterval函数手动检查。

顺便说一句，这是当你不在同一个域上时如何检查它的唯一方法。

相关文章：