監聽瀏覽器關閉和刷新

• 前言
• PC端
• 微信端

前言

最近做的項目里有一個新的需求，在不同的瀏覽器內打開的網頁，監聽用戶的操作，比如關閉瀏覽器，刷新瀏覽器等等。
這就涉及到了幾個平臺：PC端瀏覽器，移動端IOS和安卓微信的webview等等。在微信里打開的H5網頁，要獲取到用戶關閉頁面的事件。經過對visibilitychange、 unload/pagehide 、onunload、popstate各種方法一陣測試，發現安卓里visibilitychange能監聽到關閉事件。而iOS里使用pagehide能監聽。

PC端

pc端的瀏覽器，比如谷歌 chrome、IE、360等等，都沒有直接特定的監聽關閉或者刷新的方法。所以這里采用時間差，來判斷用戶是刷新還是關閉，親測可用：

//PC 端瀏覽器let _beforeUnload_time = 0,_unload_time = 0window.addEventListener('beforeunload', async ()=> {_beforeUnload_time = new Date().getTime()})window.addEventListener('unload', async () => {_unload_time = new Date().getTime()//計算時間差if (_unload_time - _beforeUnload_time <= 2) {//用戶關閉了頁面//此處關閉頁面處理邏輯alert("用戶關閉了頁面")const data = await sendRequest({url: `/destory`,data: {gameId: gameId, userId: userid},});} else {//用戶刷新了頁面//此處刷新頁面處理邏輯alert("用戶刷新了頁面")await checkEnqueue()}})

微信端

微信端為了考慮安全性，同樣微信API也未給出一個特定的api接口調用，所以這里調用微信的第三方sdk：

1、引入微信sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2、判斷是ios還是android

var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

3、對不同的平臺分別做相應的處理：

if (isAndroid) { //安卓if (window.addEventListener) {//安卓頁面關閉document.addEventListener("visibilitychange", async function () { //部分手機可以獲取到if (document.hidden) {//用戶關閉了安卓頁面//做關閉頁面處理邏輯await sendRequest({url: `/destory`,data: {gameId: gameId, userId: userid},});}})} else if (window.attachEvent) {// 主要是為了兼容老的IEwindow.attachEvent('onpagehide', async function () {await sendRequest({url: `/destory`,data: {gameId: gameId, userId: userid},});})} else {window.onbeforeunload = async function () {await sendRequest({url: `/destory`,data: {gameId: gameId, userId: userid},});}}} else if (isiOS){ //蘋果window.addEventListener("pagehide", function () {let data = new Blob([JSON.stringify({gameId: gameId, userId: userid})], {type: 'application/json; charset=UTF-8',});navigator.sendBeacon("/destory",data)}, false);window.addEventListener("pageshow", async function () {await checkEnqueue();});}

注意：
ios 的 window.addEventListener("pagehide", function () {} 監聽方法內，不支持 ajax，需要通過

navigator.sendBeacon(“url”,data) 來調后臺接口。

總結

以上是生活随笔為你收集整理的【webview】微信和PC监听浏览器关闭和刷新(亲测可用)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。