如何只在用户从浏览器中重新加载/离开站点时，而不是单击“取消”时调用API？

Question

当用户试图关闭/重新加载浏览器/选项卡时，我试图执行API调用。如果用户单击cancel，我不想调用API。我跟踪了JavaScript、浏览器、窗口关闭-发送AJAX请求或在窗口关闭时运行脚本。，但这并没有解决我的问题。我跟随卸载前捕获确认取消？来区分确认和取消。我不知道如何在用户重新加载/关闭浏览器时调用API，而不知道如何在用户单击cancel时调用API。我跟着JavaScript、浏览器、窗口关闭-发送AJAX请求或在窗口关闭时运行脚本。，试着像

用于在重新加载时显示警报或关闭选项卡。

<script>
    window.addEventListener("onbeforeunload", function(evt){
           evt.preventDefault()
           const string = '';
           evt.returnValue = string;
           return string;
   }) 
</script>

点击“取消”，什么都不应该发生。如果用户强行关闭浏览器或重新加载，则应调用API。

<script type="module">
   import lifecycle from 'https://cdn.rawgit.com/GoogleChromeLabs/page-lifecycle/0.1.1/dist/lifecycle.mjs';
   lifecycle.addEventListener('statechange', function(event) {
       if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
           var URL = "https://api.com/" //url;
           var data = '' //payload;
           navigator.sendBeacon(URL, data);
       }
     });
</script>

但这不会发生的。任何帮助都是非常感谢的。谢谢

Answer 1

您的问题正在发生，因为您使用beforeunload来显示提示符。

我可以看到，您正在正确地处理beforeunload事件，因此您必须已经意识到，浏览器供应商故意限制脚本作者在用户希望离开页面时进行定制操作的能力。这是为了防止滥用。

这种限制的一部分是，you 不需要来了解用户决定做什么，而也不会有任何聪明的解决办法。一旦告诉浏览器显示beforeunload提示符，就会失去所有的功能。如果用户单击of按钮(即决定离开页面)，浏览器将拒绝再运行您的代码。

显示提示会在您无法观察到的道路上创建一个岔路口。所以，把激光绊线放在那里而不是叉子上：

window.addEventListener("onbeforeunload", function(evt) {
  navigator.sendBeacon(url, payload)
})

这保证在用户实际离开页面时运行，并且只有当用户实际离开页面时才能运行。但是，你牺牲了说服用户不要离开的能力。你不能两全其美。

你不可能总是得到你想要的，但如果你尝试，有时你可能只是发现你得到了你需要的。-滚石乐队

我只能想出一种方法来完成您的需要，但是它需要服务器的帮助。对于大多数人来说，这不是一种选择(通常是因为信标会流向第三方分析提供商，他们不会这么做)，但为了完整起见，我将其包括在这里。

1. 在beforeunload处理程序返回之前，发出一条信标消息，上面写着“用户可能会离开页面”。
2. 在启动该信标之后，在返回之前，设置一个文档范围的mousemove处理程序，该处理程序将触发第二个信标消息，该消息显示“用户仍然在这里”(同时也取消注册本身)。
3. 返回false以显示提示
4. 修改您的服务器，以便在发生某种延迟后协调这两个事件：

• 如果服务器接收到信标1，然后也收到信标2(在一些合理的短时间内，例如5分钟内)，这意味着用户试图离开，但随后改变了主意，因此服务器应该删除信标1的记录。
• 如果服务器在时间范围内接收到信标1，但没有接收到信标2，那么这意味着用户确实离开了，因此服务器将重写以前的信标数据点，以表示“用户实际已离开”；您不需要实际将信标2写入数据存储。

(或者，取决于预期的流量和基础设施，服务器可能只在RAM中保存灯塔1数据点5分钟，并且只有在信标2从未出现时才将其提交到数据存储。或者，您可以将这两个信标写入数据库，然后有一个不同的进程来协调这些信标。结果是相同的，但它们有不同的性能特性和资源需求。)

不要在javascript中使用"URL“(所有大写)作为变量名。"URL“实际上是一个有用的网络API，所以如果您使用这个精确的变量名，您就是在破坏一种有用的功能。就像你做了let navigator = 'Henry'一样。是的，它将在没有错误的情况下执行，但是它影影是一个有用的本地功能。