HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能

更新時(shí)間：2022年03月02日 15:14:17 作者：qq_22841387

這篇文章主要介紹了如何利用HTML和JavaScript實(shí)現(xiàn)監(jiān)控切屏功能，監(jiān)控是否離開(kāi)當(dāng)前頁(yè)面，文中的示例代碼講解詳細(xì)，需要的可以參考一下

項(xiàng)目描述

該項(xiàng)目是我在網(wǎng)上看其他博客的時(shí)候無(wú)意中看到的，看見(jiàn)別人居然能實(shí)現(xiàn)這種操作很好奇

項(xiàng)目要求做到

監(jiān)控網(wǎng)頁(yè)狀態(tài)
記錄離開(kāi)次數(shù)
離開(kāi)時(shí)間

記錄離開(kāi)頁(yè)面

實(shí)現(xiàn)這個(gè)切換頁(yè)面功能需要用到一個(gè)web的APIvisiblitychange

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

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

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

大致就是通過(guò)監(jiān)聽(tīng)visiblitychange獲取當(dāng)前的狀態(tài)，根據(jù)狀態(tài)document.visibilityState去操作

創(chuàng)建html

創(chuàng)建一個(gè)標(biāo)準(zhǔn)的html頁(yè)面

監(jiān)控是否離開(kāi)頁(yè)面

<!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>第一個(gè)標(biāo)簽</title>
</head>
<body>
    <h1>這是第一個(gè)標(biāo)簽頁(yè)</h1>

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

            if(state == "hidden") {
                document.title = "我知道，你切換標(biāo)簽頁(yè)了--tab1"
            } else {
                document.title = "嘻嘻，你又回來(lái)了"
            }
        })
    </script>
</body>
</html>

監(jiān)控是否切屏

根據(jù)MDN對(duì)state的陳述，visible對(duì)部分可見(jiàn)也會(huì)觸發(fā)，所以對(duì)于分屏監(jiān)控是無(wú)法監(jiān)測(cè)到的

所以需要監(jiān)控另一個(gè)狀態(tài)是否foucus，即是否是去當(dāng)前頁(yè)面的焦點(diǎn)

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

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

記錄時(shí)間

放置一個(gè)標(biāo)志位，查看是否是觸發(fā)切屏或者切換標(biāo)簽頁(yè)，并保存此時(shí)的時(shí)間戳

當(dāng)下一次重新觸發(fā)的時(shí)候，顯示切屏?xí)r間

由于多次出現(xiàn)多次，所以封裝成一個(gè)函數(shù)

	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
            }
        }

離開(kāi)次數(shù)

不管是切屏還是離開(kāi)新建標(biāo)簽頁(yè)都需要進(jìn)行計(jì)時(shí)，而且不會(huì)因?yàn)樗⑿露袛?/p>

由此想到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);
        }