HTML5实现页面切换激活的PageVisibility API使用初探

2020-04-22 06:44:57易采站长站整理

               document.addEventListener("visibilitychange",stateChanged);       
               document.addEventListener("webkitvisibilitychange", stateChanged);       
               document.addEventListener("msvisibilitychange", stateChanged);       
          }       
          function stateChanged(){       
               console.log(document.webkitVisibilityState);       
               if(document.hidden || document.webkitHidden || document.msHidden){       
                    //new tab or window minimized     
                    timer = new Date().getTime();       
               }       
               else {       
                    alert(‘You were away for ‘ + (new Date().getTime()-timer)/1000+ ‘ seconds.’)       
               }       
          }       
     </script>       
</head>       
<body onLoad="onLoad()">       
</body>       
</html>    

在上面的代码中,同样,在CHROME运行下,在LOAD事件中,监听了相关的 webkitvisibilitychange事件(这个在CHROME下),如果是IE 10,则是 msvisibilitychange事件,然后在回调函数中,开始了计算用户在页面停留的时间, 所以当你打开其他TAB页或者最小化后,再切换回原来这个页,则会JAVASCRIPT 弹出显示:你离开了页面多长时间 。