企业微信和页面离开事件

💡 前言

最近在开发中遇到了一个需求：在用户关闭浏览器时上报。然而在企业微信环境下却发现了一些意想不到的行为差异。本文将详细记录这次踩坑经历，希望能为遇到类似问题的开发者提供参考。

如果你有更好的方案也请告知我。

🎯 核心结论

经过详细测试，发现不同浏览器环境下的行为存在显著差异：

📱 企业微信浏览器

刷新场景 ：beforeunload 事件未触发 ，unload 事件正常触发 ，sendBeacon 可以发送
关闭场景 ：beforeunload 和 unload 事件均未触发 ，sendBeacon 无法发送

🌐 Chrome & Safari 浏览器

刷新/关闭场景 ：beforeunload 和 unload 事件均正常触发 ，sendBeacon 均可发送

⚠️ 注意：本测试仅在 Mac 环境下进行，Windows 环境下的表现可能有所不同。

🧪 测试代码

为了验证这个问题，我编写了以下测试代码：

🔗 在线演示 ：CodeSandbox

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    <div id="nowTime"></div>
    <div id="beforeUnloadTime"></div>
    <div id="unloadTime"></div>
    <script>
      document.querySelector("#nowTime").innerHTML = "nowTime " + new Date();
      document.querySelector("#beforeUnloadTime").innerHTML =
        "beforeunloadTime " + localStorage.getItem("beforeunloadTime");
      document.querySelector("#unloadTime").innerHTML =
        "unloadTime " + localStorage.getItem("unloadTime");

      window.addEventListener("beforeunload", (event) => {
        localStorage.setItem("beforeunloadTime", "" + new Date());
        navigator.sendBeacon("/api/beforeunload/sendBeacon");
      });
      window.addEventListener("unload", (event) => {
        localStorage.setItem("unloadTime", "" + new Date());
        navigator.sendBeacon("/api/unload/sendBeacon");
      });
    </script>
  </body>
</html>