企业微信和页面离开事件

💡 前言

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

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


🎯 核心结论

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

📱 企业微信浏览器

  • 刷新场景beforeunload 事件未触发unload 事件正常触发sendBeacon 可以发送

  • 关闭场景beforeunloadunload 事件均未触发sendBeacon 无法发送

🌐 Chrome & Safari 浏览器

  • 刷新/关闭场景beforeunloadunload 事件均正常触发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>

📊 详细测试结果

🏢 企业微信环境测试

🔄 刷新场景

  • 事件触发情况 :仅 unload 事件触发,beforeunload 事件失效
  • 网络请求情况 :仅 unload 中的 sendBeacon 成功发送

❌ 关闭场景

  • 事件触发情况beforeunloadunload 事件均未触发
  • 网络请求情况 :无任何 sendBeacon 请求发出

🌐 Chrome 浏览器测试

🔄 刷新场景

  • 事件触发情况beforeunloadunload 事件均正常触发
  • 网络请求情况 :两个 sendBeacon 请求均成功发送

❌ 关闭场景

  • 事件触发情况beforeunloadunload 事件均正常触发
  • 网络请求情况 :两个 sendBeacon 请求均成功发送

🧭 Safari 浏览器测试

🔄 刷新场景

  • 事件触发情况beforeunloadunload 事件均正常触发
  • 网络请求情况 :两个 sendBeacon 请求均成功发送

❌ 关闭场景

  • 事件触发情况beforeunloadunload 事件均正常触发
  • 网络请求情况 :两个 sendBeacon 请求均成功发送

🔧 测试环境配置

📋 测试环境说明

  • 操作系统:macOS(Windows 环境需要开发者自行验证)

  • 企业微信:基于 WKWebView 内核

  • 对比浏览器:Chrome、Safari 最新版本

🛠️ 企业微信调试模式开启方法

为了方便测试,可以开启企业微信的调试模式:

  1. 开启调试模式 :按下组合键 Ctrl + Option + Command + Shift + D

  2. 找到调试选项:在弹出的菜单中选择相应选项

  1. 使用调试窗口:会弹出一个专用的调试窗口,可以直接输入 URL 进行测试
相关推荐
林烈涛11 分钟前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_999941 分钟前
Unocss
开发语言·前端
goto_w2 小时前
前端实现复杂的Excel导出
前端·excel
Baklib梅梅2 小时前
2025文档管理软件推荐:效率、安全与协作全解析
前端·ruby on rails·前端框架·ruby
卷Java2 小时前
小程序前端功能更新说明
java·前端·spring boot·微信小程序·小程序·uni-app
FogLetter2 小时前
前端性能救星:虚拟列表原理与实现,让你的10万条数据流畅如丝!
前端·性能优化
我是天龙_绍2 小时前
前端驼峰,后端下划线,问:如何统一?
前端
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
code_YuJun2 小时前
nginx 配置相关
前端·nginx