移動端檢測微信瀏覽器返回,關閉,進入后台操作


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

 安卓手機關閉瀏覽器監聽不到,具體看下一期https://www.cnblogs.com/stubborn-donkey/p/12978860.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM