一、 監聽你的頁面活動
最近校招筆試如火如荼地開展。各種小心思都浮上來了:"我就查一道".小心翼翼按了一下tab切換(mac用三爪),Document.visibilityState開始工作了."監測到你切換頁面,超過xx次將影響你的成績(希望你自重)"
二、 visibilityState
| 值 | 描述 |
|---|---|
| visible | 此時頁面內容至少是部分可見. 即此頁面在前景標簽頁中，並且窗口沒有最小化. |
| hidden | 此時頁面對用戶不可見. 即文檔處於背景標簽頁或者窗口處於最小化狀態，或者操作系統正處於 '鎖屏狀態' . |
| prerender | 頁面此時正在渲染中, 文檔只能從此狀態開始，永遠不能從其他值變為此狀態. |
| unloaded | 頁面從內存中卸載清除 |
當此屬性的值改變時, 會遞交 visibilitychange 事件給Document.
三、visibilitychange用法
當頁面離開的時候,visibilityState值也會相應改變,只需要在監聽事件上做判斷即可
實現'作弊監聽'功能,監聽用戶離開頁面的時間和次數
<script>
let leaveTime;
let inTime;
let num = 0;
document.addEventListener('visibilitychange',function(e){
console.log(document.visibilityState);
let state = document.visibilityState
if(state == 'hidden'){
leaveTime = (new Date()).getTime();
num++;
}
if(state == 'visible'){
inTime = (new Date()).getTime();
let time = (Number(inTime) - Number(leaveTime))/1000;
alert('用戶離開了:' + time + 's' + '\n' + '用戶離開了:' + num + '次')
}
})
</script>
效果圖:
解析一下步驟:
-
首先定義幾個全局變量,不用全局變量的話每次監聽更改的時候,未賦值的值會報underfine。
leaveTime:用戶離開頁面的時間. 用getTime()獲取毫秒
inTime:用戶進入頁面的時間.
num:記錄用戶離開次數 -
通過不同的參數執行不同的操作
state為hidden的時候表示離開頁面,記錄離開時間,並且記錄次數
state為visible的時候表示回來頁面,記錄回來時間,返回時間差和次數
一個簡單的監聽離開事件就完成啦！
四、利用visibilityState實現離開頁面暫停播放音樂(視頻)功能
<body>
<video style="width:600px" controls>
<source src="tvb.mp4" type="video/mp4">
瀏覽器不支持 video 標簽。
</video>
<script>
document.addEventListener('visibilitychange',function(e){
let state = document.visibilityState;
if(state == 'hidden'){
document.querySelector('video').pause();
}
})
</script>
</body>
效果:
-
打開頁面 播放視頻
-
切換頁面(mac三爪滑過)
