原生js实现在app里面检测页面是否隐藏，检测页面是否是从缓存里面拿的还是跳转进入的

有一个需求，就是计时，在页面跳转到第三方app的时候，需要计算在第三方页面或者第三方app的时间，最开始的时候，直接页面一个倒计时就行了，最后需求变成了，在本页面不算，必须跳转到其他页面倒计时才算，然后就是通过时间戳的比较进行实现，最后到了这种跳转第三方app的情况时候，发现返回会后页面不会刷新，导致没法去比较时间，不知道听明白没，直接看解决吧：：：：

解决方案案：

1.最开始的想法是用户点击跳转app的时候，起一个定时器，然后跳转页面的时候定时器挂去，等回来了正好执行，最后发现，页面在后台隐藏的时候，页面的一些异步耗时操作还是在后台一直跑着，方案1失败告终，不过明白了app之前切换的大概流程，这波不亏，以后做起来不踩坑

2.通过页面的展示和隐藏（visibilitychange）

其实这个api我也是第一次用，硬生生百度出来的，因为使用uniapp和小程序的时候，里面有onshow事件，所以感觉h5应该也可以，就找到了这个牛逼的api：visibilitychange

具体的使用方法就是事件监听，直接贴代码了

   document.addEventListener(
            "visibilitychange",
            () => {
                if (document.hidden) {
                    // alert("true11")
                    // 当前页面进入后台
                    document.title = "隐藏了";
                } else {
                    // document.title = "展示了";
                    // yipianTime =
                    //     localStorage.getItem(
                    //         "yiduanshijianDetail" + objSearch.pid + objSearch.taskid + objSearch.hid
                    //     ) || yipianTime;
                    // localStorage.removeItem(
                    //     "yiduanshijianDetail" + objSearch.pid + objSearch.taskid + objSearch.hid
                    // );
                    // chazhishijian();
                    window.location.reload()
                }
                // alert(document.visibilityState);
            },
            false
        );

我用的主要就是 document.hidden这个比较简单一点，就是true和false，可能还有兼容的问题，大佬们可以自行解决，因为我没遇到

返回true，说明页面被隐藏了，返回false说明页面展示出来了

然后还有一些比较精致的方法，判断的有页面缩放，页面卸载之类的，具体可以看MDN

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event

具体的操作就是大概这样子，问题已经解决

3.其实我感觉这个才是最厉害的

判断页面的内容你是否从浏览器拿缓存

  window.onpageshow = function(e) {
            var event = e || window.event;
            if (event.persisted || window.performance && window.performance.navigation.type == 2) {
                // 页面是通过后退进来的
                // alert(1111)
                window.location.reload()
            } else {
                // 页面是通过链接跳转进来的
            }
        }

具体的使用场景就是在app里面有的app的webview设计的是不刷新，但是你跳转页面回来之后，有一些状态发生了变化，最简单暴力的方法就是直接刷新页面，也可以温柔一点省一点流量，就是将那些刷新状态的方法给整了一下，在里面执行一次，在掉一次接口就完事

需求完美解决，么么 么么 么么哒