移动端检测微信浏览器返回，关闭，进入后台操作

背景：

最近做一个倒计时记录学习时长项目，需要在用户点击浏览器的返回按钮或者直接关闭浏览器，或者直接退出微信或者进入后台时记录下当前页面的进度，下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload，在安卓和pc上可以监测到，但是iOS上监测不到

广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com

解决办法：

根据百度相关文档，发现iOS端检测需要用pagehide去检测，于是修改代码如下

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

if (isAndroid) {
	//这个是安卓操作系统
	window.onbeforeunload = function() {
		//窗口关闭前
		...暂停倒计时并且ajax请求记录到数据库
	};
} else if (isIOS) {
	//这个是ios操作系统
	window.addEventListener('pagehide', function() {
		...暂停倒计时并且ajax请求记录到数据库
	});
} else {
	//这个pc
	window.onbeforeunload = function() {
		//窗口关闭前
		c...暂停倒计时并且ajax请求记录到数据库
	};
}

调试是打断点iOS还是无法监测到，当时郁闷了很长时间，苹果官方文档明明写了用这个能监测到，但是我居然监测不到，一度以为是系统版本低，升级到最新系统发现还是监测不到pagehide,无法记录数据到数据库，最后翻遍百度在一个帖子的不起眼的评论里看到了一句话说把ajax请求改成同步试试，我抱着试试的态度修改了代码

//这个是ios操作系统
window.addEventListener('pagehide', function() {
	$.ajaxSetup({
		async: false //关闭异步
	});
	...ajax请求记录数据到数据库
});
window.addEventListener('pageshow', function() {
	$.ajaxSetup({
		async: true //页面显示时恢复异步
	});
});

发布测试居然监测到了，郁闷已久的问题终于解决了，虽然不知道什么原因，但是解决了就是好事

监测浏览器返回、关闭、退出、进入后台完整代码

if (isAndroid) {
	//这个是安卓操作系统
	window.onbeforeunload = function() {
		//窗口关闭前
		...ajax操作
	};
} else if (isIOS) {
	//这个是ios操作系统
	window.addEventListener('pagehide', function() {
		$.ajaxSetup({
			async: false
		});
		...ajax操作
	});
	window.addEventListener('pageshow', function() {
		$.ajaxSetup({
			async: true
		});
	});
} else {
	//这个pc
	window.onbeforeunload = function() {
		//窗口关闭前
		...ajax操作
	};
}

//window.onunload = function () {
//    //窗口关闭后
...ajax操作
//};
window.addEventListener("popstate", function(e) {
	...ajax操作
}, false);
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, function() {
	console.log("当前页面是否被隐藏：" + document[hidden]);
	if (document[hidden]) { //页面被隐藏，进入后台运行时监测
		...ajax操作
	}
	else {
		...页面重新进入前台时操作， 比如恢复倒计时
	}
}, false);