背景:最近做一個倒計時記錄學習時長項目,需要在用戶點擊瀏覽器的返回按鈕或者直接關閉瀏覽器,或者直接退出微信或者進入後臺時記錄下當前頁面的進度,下次進去從上次退出的地方開始倒計時。一開始想的很簡單直接監測瀏覽器的返回事件window.onbeforeunload,在安卓和pc上可以監測到,但是iOS上 ...
背景:最近做一個倒計時記錄學習時長項目,需要在用戶點擊瀏覽器的返回按鈕或者直接關閉瀏覽器,或者直接退出微信或者進入後臺時記錄下當前頁面的進度,下次進去從上次退出的地方開始倒計時。一開始想的很簡單直接監測瀏覽器的返回事件window.onbeforeunload,在安卓和pc上可以監測到,但是iOS上監測不到
解決辦法:根據百度相關文檔,發現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);