仅当用户实际关闭选项卡时，如何运行 Javascript 代码？答案

【问题标题】：How do I run Javascript code only if the user actually closes the tab?仅当用户实际关闭选项卡时，如何运行 Javascript 代码？
【发布时间】：2020-05-11 05:27:23
【问题描述】：

当用户关闭我的页面时，我正在尝试运行一些 JS 代码。我在网上找到了这个：

window.addEventListener('beforeunload', (event) => {
      event.returnValue = null
      console.log("unload")
    });

当我尝试在我的文档中使用此代码关闭我的页面时，Chrome 会给我一个对话框并询问“离开网站？您所做的更改可能不会被保存”，并带有“离开”和“取消”选项。它还运行console.log，所以它似乎工作正常，对吧？但是，console.log 会在提示出现的同时运行。所以我不知道用户实际上关闭了网站，因为据我所知，他们本可以点击取消。如果我知道用户实际上关闭了页面，我只想运行我的代码。

如果可能的话，我真的更愿意避免使用 WebSockets，或者进行某种连续轮询来检查用户是否仍在页面上。但是，如果真的没有其他方法可以做到这一点，我可能会诉诸其中一种方法，但我真的希望有另一种方法。

有什么想法吗？

编辑：我实际上并不关心触发beforeunload 事件的原因。例如，用户可能会单击浏览器中的关闭按钮，他们可能会刷新页面，可能会单击链接，或者可能会在浏览器中键入另一个 URL。我不在乎。如果他们在出现的提示上单击取消，我只是不想运行我的代码，因为他们实际上并不会真正卸载页面。另外，我没有做任何侵入性的事情，只是在幕后做一些数据库的事情，所以如果代码在页面关闭后以某种方式运行，那很好（我想我记得一些关于 sendBeacon 的事情或者能够做到的事情，但我不确定），或者如果根本没有出现提示也可以，它只是运行我的代码然后关闭页面。

【问题讨论】：

窗口 api 无法区分选项卡是否正在关闭或触发卸载的原因。您的具体用例是什么？
啊，也许我应该更清楚。我不在乎是什么触发了它，例如我不在乎用户是否真的点击了小关闭按钮，或者他们是否点击了另一个链接，或者他们刷新了等等。我想在所有这些情况下运行我的代码，只要我的文档会卸载。但是，如果他们在出现的提示上单击取消，我不想运行代码，因为他们显然没有实际卸载页面。你明白我的意思吗？
您是否要向服务器发送数据？如果是这样，卸载事件中使用的较新的navigator.sendBeacon() 可能会引起人们的兴趣
OK...检查浏览器兼容性，但当兼容时，它比卸载时的 ajax 请求可靠得多
没有抓住重点......在卸载中使用 ajax 根本不可靠

标签： javascript dom-events addeventlistener onbeforeunload

【解决方案1】：

顾名思义，此事件发生在页面卸载之前，并允许用户取消卸载。

使用unload 事件侦听器来检测页面实际卸载的时间。如果你有两个事件监听器，这只会在用户选择Leave 时运行。

【讨论】：

谢谢！这对我有用。我为beforeunload 使用了一个事件侦听器，为unload 使用了一个事件侦听器，并将我想在页面关闭时运行的代码放在beforeunload 侦听器中。现在根本没有提示，这对我来说很好。

【解决方案2】：

没有直接的方法来检测浏览器是否关闭，但是您可以检查选项卡是否关闭。你可以使用onunload & onbeforeunload这些事件。

在您的情况下，您可以使用$(window).off('beforeunload');

【讨论】：