在前端开发中，经常会用到弹出窗口（pop-up window）来展示一些内容或操作。但是当用户关闭这个弹出窗口时，我们可能需要执行一些操作，比如更新页面状态或提醒用户保存未完成的工作。利用 JavaScript 可以很容易地捕获弹出窗口的 close 事件，并实现相应的逻辑。
监听 close 事件
要监听弹出窗口的 close 事件，我们首先需要获取弹出窗口的引用。通常，我们可以使用 window.open() 方法打开一个新的窗口，并将返回的窗口对象保存起来。例如：
const popup = window.open(url, name, options);
其中，url 是要在弹出窗口中打开的页面 URL，name 是窗口的名称，options 是一些可选参数，比如窗口尺寸和位置等。注意，在跨域情况下，由于浏览器的安全策略，弹出窗口可能无法访问父窗口的 DOM。
接着，我们可以给这个窗口对象添加一个 beforeunload 事件监听器，该事件会在用户关闭窗口时触发。例如：
popup.addEventListener('beforeunload', function(event) {
// 在这里编写关闭窗口时需要执行的代码
});在这个事件监听器中，我们可以编写需要执行的代码，比如发送请求、更新页面状态等。注意，由于浏览器的安全策略，我们无法在这里阻止用户关闭窗口，而只能提醒用户是否保存未完成的工作。
示例代码
下面是一个完整的示例代码，展示了如何在弹出窗口中捕获 close 事件：
-- -------------------- ---- ------- ----- ----- - -------------------------------------- ---------- ------------------------ -------------------------------------- --------------- - ----- -------------- - ---------- ----------------- - --------------- -- ----------------------- ------ --------------- --- -- ---------------------- ------------ --
在这个示例中，我们使用 window.open() 方法打开了一个名为 example 的弹出窗口，大小为 600x400 像素，并将其引用保存到 popup 变量中。接着，我们给这个窗口对象添加了一个 beforeunload 事件监听器，在事件处理函数中设置了一个确认信息，并返回它，以提示用户是否保存未完成的工作。最后，我们可以在控制台中看到相关的输出信息。
总结
在前端开发中，捕获弹出窗口的 close 事件是一项非常实用的技能。通过监听 beforeunload 事件，我们可以及时地执行必要的操作，并提醒用户是否保存未完成的工作。需要注意的是，在跨域情况下，由于浏览器的安全策略，我们无法访问父窗口的 DOM，因此可能需要通过消息传递等方式来实现通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26526