瀏覽器監聽當前頁 (是否切屏)
一、監聽的api
瀏覽器自帶了相關的API了，那就是利用visibilitychange屬性，MDN的介紹：
當其選項卡的內容變得可見或被隱藏時，會在文檔上觸發
visibilitychange(能見度更改)事件。
所以我只需要注冊監聽對visibilitychange的事件即可：
document.addEventListener("visibilitychange", function() {
if(document.visibilityState == 'hidden'){
console.log('hidden')
} else if (document.visibilityState == 'visible') {
console.log('visible')
}
});
復制代碼
這里需要注意的是，MDN的上有說明的是，不要使用window而是document：
出於兼容性原因，請確保使用
document.addEventListener而不是window.addEventListener來注冊回調。 Safari <14.0僅支持前者。
這個屬性存在瀏覽器兼容性問題：在IE10以下不支持該屬性
二、使用
document.addEventListener("visibilitychange", function () {
console.log(document.visibilityState);
if (document.visibilityState == 'hidden') {
document.title = '切換到了其他頁簽';
} else if (document.visibilityState == 'visible') {
document.title = '切換回來了';
}
});
三、監聽當前窗口是否處於焦點狀態
document.title = '頁面1';
};
window.onblur = function () {
alert('失去焦點');
};
let n = 0;
let isFirst = true;
window.onfocus = function () {
if (!isFirst) {
console.log(`請注意，你失去焦點了！總共離開${n}秒`);
isFirst = true;
n = 0;
}
};
window.onblur = function () {
isFirst = false;
// setInterval(function () {
// n++;
// }, 1000)
setTimeout(run,1000)
};
let run =function(){
n++;
setTimeout(run,1000)
}
let blurtime=null
let focustime=null
let isFirst=true
window.onfocus = function () {
focustime=new Date().valueOf()
let second=(focustime-blurtime)/1000
second= Math.round((second + Number.EPSILON) * 10) / 10
if (!isFirst) {
console.log(`請注意，你失去焦點了！總共離開${second}秒`);
}
};
window.onblur = function () {
if(isFirst){
isFirst = false;
}
blurtime=new Date().valueOf()
};