瀏覽器中的標籤切換事件

時間 2019-11-05

原文原文鏈接

其實沒什麼好寫的，逛知乎的時候忽然斷網了，因而我切換回小說標籤頁繼續看沒看完的小說，小說看得差很少了切回知乎的時候彈出一個錯誤提示，請原諒個人無聊，我來回切換十屢次每次都彈出一個錯誤提示。我忽然想知道這是怎麼實現的，在google上搜索一番

瀏覽器提供了visibilitychange這個api能夠監控標籤頁的狀態

應用場景大概想了一下視頻直播 h5遊戲可能用得上

寫了一個demo，隨便看看就行了

代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch1</title>
</head>
<body>
    <script>
        function add0(m){return m<10?'0'+m:m }
        function getDate() {
            var time = new Date()
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }

        function onVisibilityChanged(event) {
            var hidden = event.target.webkitHidden;
              if (hidden) {
                  
                console.log('close',getDate())
              }
              else{
                  
                console.log('open',getDate())
              }
        }
        document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
    </script>
</body>
</html>