背景：

最近做一個倒計時記錄學習時長專案，需要在使用者點選瀏覽器的返回按鈕或者直接關閉瀏覽器，或者直接退出微信或者進入後臺時記錄下當前頁面的進度，下次進去從上次退出的地方開始倒計時。一開始想的很簡單直接監測瀏覽器的返回事件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);