前言

最近做的项目里有一个新的需求，在不同的浏览器内打开的网页，监听用户的操作，比如关闭浏览器，刷新浏览器等等。
这就涉及到了几个平台：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监听浏览器关闭和刷新(亲测可用)相关推荐

h5页点击返回时关闭_H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件...
在H5页面中一些场景情况下防止表单数据丢失或者防止用户意外跳走页面,通过js进行监听提示用户,通过onbeforeunload事件和onunload事件实现. onbeforeunload和onunl ...
javaScript如何监听浏览器关闭事件
转载链接:http://www.cnblogs.com/Tim_Liu/archive/2010/11/09/1872596.html 最近写东西的时候发现需要对浏览器的关闭进行监听, 当用户关闭的时 ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
监听页面关闭和刷新的总结
做开发的一个很重要的能力就是异常场景处理.而页面的一个很常见的异常场景就是页面关闭和刷新,尤其是对于需要即时刷新.定时操作.自动提交的场景.而我们应该都知道,监听浏览器页面关闭和刷新的一个很常用的事件 ...
微信支付rootca.pem通用根证书文件，亲测可用
微信支付rootca.pem通用根证书文件,2018年5月后微信支付默认不提供. 我当初找了好久又花钱又费时才找的可以用的证书,亲测可用. 链接:https://download.csdn.net/d ...
js监听浏览器关闭页面事件
window.onbeforeunload = function() {//功能函数 } window.onbeforeunload = function(e) {var e = window.eve ...
微信小程序码的生成(JAVA完整版) 亲测可用
JAVA生成小程序码(太阳码) 首先准备工具类,这里我使用的是QrUtil;废话不多说,上工具类; 工具类是获取token使用; appid = 小程序appID secret = 小程序秘钥 /** ...
监听浏览器刷新/关闭页面
首先,使用onunload或onbeforeunload可以监听浏览器关闭事件,但是无法区分关闭与刷新.以下js代码可以部分监听关闭浏览器的事件! 可以在标签中添加方法: <!DOCTYPE h ...
巨坑！监听浏览器窗口关闭onbeforeunload不起作用（脱坑了啊！！）
----------------重要通知-------------- Hello,本人的博客文章已更新至个人网站(www.jonexu.cn) 文章中有问题可以到网站联系博主,后续新的文章也将更新在个 ...

【webview】微信和PC监听浏览器关闭和刷新(亲测可用)

监听浏览器关闭和刷新

前言

PC端

微信端

【webview】微信和PC监听浏览器关闭和刷新(亲测可用)相关推荐

最新文章

热门文章