HTML+JS實現監控切屏功能

Posted on by

項目描述

該項目是我在網上看其他博客的時候無意中看到的，看見別人居然能實現這種操作很好奇

項目要求做到

  • 監控網頁狀態
  • 記錄離開次數
  • 離開時間

記錄離開頁面

實現這個切換頁面功能需要用到一個web的APIvisiblitychange

visibilitychange – Web API 接口參考 | MDN (mozilla.org)

Document.visibilityState – Web API 接口參考 | MDN (mozilla.org)

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

大致就是通過監聽visiblitychange獲取當前的狀態，根據狀態document.visibilityState去操作

創建html

創建一個標準的html頁面

監控是否離開頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一個標簽</title>
</head>
<body>
    <h1>這是第一個標簽頁</h1>

    <script>
        document.addEventListener('visibilitychange' , () => {
            let state = document.visibilityState

            if(state == "hidden") {
                document.title = "我知道，你切換標簽頁瞭--tab1"
            } else {
                document.title = "嘻嘻，你又回來瞭"
            }
        })
    </script>
</body>
</html>

監控是否切屏

根據MDN對state的陳述，visible對部分可見也會觸發，所以對於分屏監控是無法監測到的

所以需要監控另一個狀態是否foucus，即是否是去當前頁面的焦點

window.onblur = () => {
            document.title = "你居然還切屏？？？--tab1"
        }

        window.onfocus = () => {
            document.title = "好吧，你回來瞭--tab1"
        }

記錄時間

放置一個標志位，查看是否是觸發切屏或者切換標簽頁，並保存此時的時間戳

當下一次重新觸發的時候，顯示切屏時間

由於多次出現多次，所以封裝成一個函數

	let isCut = false
        let lastTime;

	function recordTime() {
            isCut = true
            lastTime = Date.now()
        }

        function showTimeDiff() {
            if (isCut) {
                let timeDiff = (Date.now() - lastTime) / 1000;
                // alert(`你切屏出去${timeDiff}`)
                console.log(timeDiff);
                isCut = false
            }
        }

離開次數

不管是切屏還是離開新建標簽頁都需要進行計時，而且不會因為刷新而中斷

由此想到sessionStorage

function countTimes() {
            let store = window.sessionStorage.getItem('leave-times')
            if( store === null) {
                window.sessionStorage.setItem('leave-times', 0)
                return
            }
            store ++;
            window.sessionStorage.setItem('leave-times' , store);
        }

到此這篇關於HTML+JS實現監控切屏功能的文章就介紹到這瞭,更多相關JS監控切屏內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：