js 判断微信网页关闭（js 判断微信网页关闭原因）

　　在 Web 开发中，判断微信网页关闭是一个常见的需求。因为微信进入网页时会打开一个微信内置浏览器，而一旦用户关闭该网页，页面会被销毁，需要做出相应的处理。本文将针对这一需求，详细介绍如何使用 JavaScript（以下简称 js）判断微信网页是否关闭。 　　2. 什么是微信内置浏览器 　　微信内置浏览器是指，当用户点击微信公众号中的链接进入网页时，微信会打开一个基于 webview 技术的内置浏览器，来承载网页。这个内置浏览器有一些限制和不同于常见浏览器的特性，如不支持某些 JavaScript API、不支持 session storage 等。 　　3. 如何判断微信内置浏览器 　　由于微信内置浏览器与常见浏览器存在许多不同之处，因此我们需要先判断当前浏览器是否为微信内置浏览器，以便后续处理。 　　判断方式如下： 　　```javascript 　　function isWeixinBrowser() { 　　const ua = window.navigator.userAgent.toLowerCase() 　　return /micromessenger/.test(ua) 　　} 　　``` 　　该函数的原理是通过检查 `window.navigator.userAgent` 是否包含 "micromessenger" 来判断当前浏览器是否为微信内置浏览器。如果返回 true，则表示当前是在微信浏览器内打开的页面，否则就是在其他浏览器打开的页面。 　　4. 微信网页关闭事件监听 　　当用户关闭微信内置浏览器中打开的网页时，页面会被销毁。此时我们需要监听相应的事件，以便在页面被销毁前做一些必要的处理。 　　在微信内置浏览器中，我们可以通过监听 `WeixinJSBridgeReady` 或 `onunload` 事件来实现关闭事件的监听。在这里我们选择监听 `WeixinJSBridgeReady` 事件，因为它不仅可以监听关闭事件，还可以监听其他一些微信内置浏览器特有的事件。 　　代码如下： 　　```javascript 　　if (isWeixinBrowser()) { 　　document.addEventListener('WeixinJSBridgeReady', function () { 　　WeixinJSBridge.invoke('onCloseWindow', {}, function () { 　　// 用户关闭页面时的回调函数 　　}); 　　}); 　　} else { 　　window.addEventListener('onunload', function () { 　　// 用户关闭页面时的回调函数 　　}); 　　} 　　``` 　　在上面的代码中，我们首先判断当前浏览器是否为微信内置浏览器，如果是的话则监听 `WeixinJSBridgeReady` 事件，并在回调函数中添加 `WeixinJSBridge.invoke('onCloseWindow', {}, function () {...})`，这样用户关闭页面时就会自动触发该回调函数。 　　而如果不是微信内置浏览器，则监听 `onunload` 事件，在用户关闭页面时触发相应的回调函数。 　　5. 微信内置浏览器的一些限制 　　微信内置浏览器在某些功能上与常见浏览器存在不同，因此在进行开发时需要注意以下限制： 　　- 不支持某些 JavaScript API，如 File API、WebSocket 等。 　　- 不支持 session storage，而 localStorage 可以正常使用。 　　- 在 AutoPlay 等音视频播放方面有所限制。 　　- 页面缓存需要手动清除。 　　因此，我们需要根据这些限制在开发时进行相应的调整和处理，以免影响用户使用。 　　6. 总结 　　本文主要介绍了使用 JavaScript 判断微信网页关闭的一些方法，包括如何判断当前浏览器是否为微信内置浏览器、如何监听微信内置浏览器的关闭事件、以及微信内置浏览器的一些限制。通过本文的介绍，相信读者已经掌握了如何在微信内置浏览器中进行开发和判断页面关闭的方法。在实际开发中，还需要结合具体的业务需求，进行相应的处理和优化。 　　在使用 JavaScript 编写微信公众号网页的过程中，经常需要判断网页的关闭原因，以便进行一些相关的操作。本文介绍了一些常见的关闭原因以及如何用 JavaScript 判断它们。 　　2. 微信网页关闭原因 　　在微信网页关闭时，有以下几种情况： 　　(1) 用户主动关闭。 　　用户主动关闭网页，一般的操作是点击右上角的关闭按钮或直接通过手机的后退按键关闭。 　　(2) 重定向关闭。 　　有时候我们需要通过 JavaScript 的方式跳转到其他页面，如果跳转的页面和当前页面在同一域名下，则跳转时只会刷新页面，而不是打开一个新的页面。这种情况下，关闭当前页面时，会触发重定向关闭。 　　(3) 超时关闭。 　　在微信公众号中，如果用户长时间不操作，微信会自动关闭网页，这种关闭称为超时关闭。 　　(4) 系统异常关闭。 　　在不稳定的网络环境下，有时候会出现一些系统异常，例如服务器主机故障、网络连接异常等，这时可能会导致微信网页异常关闭。 　　3. 判断微信网页关闭原因 　　对于不同的关闭原因，需要进行相应的处理。下面介绍如何判断微信网页关闭原因。 　　(1) 用户主动关闭 　　当用户主动关闭网页时，触发的是 window.onbeforeunload 事件。我们可以在该事件中添加一些提示信息，以便用户可以确认是否要关闭网页。 　　```javascript 　　window.onbeforeunload = function(event) { 　　var e = event || window.event; 　　// Chrome、Safari、Firefox 4+、Opera 12+、IE 6+、Edge 　　e.returnValue = '确定要离开吗？'; 　　// 兼容旧版 IE 　　return '确定要离开吗？'; 　　}; 　　``` 　　当用户点击关闭按钮时，会弹出一个提示框，用户可以选择“留在此页面”或“离开此页面”。 　　另外，在进行一些特殊的操作时，需要在页面关闭时进行一些清理操作，例如清空本地存储或发送一些请求。这时可以通过监听 window.onunload 事件来实现。 　　```javascript 　　window.onunload = function() { 　　// 清空本地存储或发送请求 　　}; 　　``` 　　(2) 重定向关闭 　　当发生重定向关闭时，window.onbeforeunload 事件也会被触发，但是在触发前会先触发 window.onunload 事件。我们可以在 window.onunload 事件中进行重定向，以便避免数据丢失。可以通过判断是否存在 window.location.href 来识别是否发生了重定向关闭。如果存在，则说明是重定向关闭。 　　```javascript 　　window.onunload = function() { 　　if (window.location.href) { 　　window.location.href = "http://www.example.com"; 　　} 　　}; 　　``` 　　(3) 超时关闭 　　当发生超时关闭时，window.onunload 事件会被立即触发，也就是说，不会触发 window.onbeforeunload 事件。我们可以通过判断事件的 type 属性为 unload 来识别是否发生了超时关闭。 　　```javascript 　　window.onunload = function(event) { 　　if (event.type == "unload") { 　　// 发送请求等操作 　　} 　　}; 　　``` 　　(4) 系统异常关闭 　　当发生系统异常关闭时，window.onbeforeunload 事件也会被触发，但是在触发前会先触发 window.onunload 事件。我们可以在 window.onunload 事件中判断当前页面是否已经卸载，来判断是否发生了系统异常关闭。 　　```javascript 　　window.onunload = function() { 　　if (!document.documentElement) { 　　// 页面已经卸载，发生了系统异常关闭 　　} 　　}; 　　``` 　　4. 总结 　　在编写微信公众号网页时，需要充分考虑页面关闭的情况，并按照不同的关闭原因进行相应的处理。上文介绍了如何通过 JavaScript 判断微信网页关闭原因，并给出了相应的处理方法。希望可以帮助大家更好地编写微信公众号网页。