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


    背景:最近做一个倒计时记录学习时长项目,需要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件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

  • 相关阅读:
    OpenMP vs WinSxS
    JIT, dynarec and binary translation
    VC++2010 bug
    控制和释放共享内存块
    分配和释放信号量
    代码列表5.1 (shm.c) 尝试共享内存
    绑定和脱离
    信号量
    每个字段动态添加一个随机数
    最近做了一个红底鞋类电商网站
  • 原文地址:https://www.cnblogs.com/stubborn-donkey/p/12851687.html
Copyright © 2020-2023  润新知