有些時候我們需要在項目中判斷用戶是否在瀏覽當前頁面，或者當前頁面是否處於激活狀態。然后再進行相關的操作。瀏覽器中可通過window對象的onblur、onfocus判斷，或者document的hidden屬性判斷。
1、window.onblur & window.onfocus
關於是否失焦點，瀏覽器對象有onfocus 和 onblur事件可以監聽。但是觸發這兩個事件的前提是頁面之前是focus過的。也就是說頁面剛剛渲染完，用戶在沒有頁面上任何操作時，頁面是不會正常監聽這兩個事件的；或者頁面在打開狀態下，但是觸發了onblur之后並無頁面操作的情況下也不會正常監聽這兩個事件。直到，用戶操作頁面觸發focus，之后離開頁面才會觸發blur，再次點擊到當前頁面時才會觸發focus，如此反復都會觸發相應的事件。
觸發onblur事件的情況：
1、在chrome瀏覽器下，點擊console面板也會觸發blur事件，同樣的，前提是之前是focus的狀態。
2、頁面最小化；
3、瀏覽器切換tab頁面；
4、頁面中的任何彈窗；
5、focus狀態下切換到其他應用
觸發onfocus的情況：
1、用戶存在頁面操作（包括頁面中js腳本運行。如頁面加載完無js運行，用戶無操作，則不會觸發 ）；
2、onblur事件觸發前提下，頁面最大化；
3、onblur事件觸發前提下，頁面 從其他tab頁切換回當前頁面；
2、document.hidden
hidden是document的屬性，可以判斷頁面是否顯示的是當前的頁面。visibilitychange事件就是觸發頁面可見的事件。當然不同的瀏覽器內核記得要加前綴。表示頁面處於非激活狀態，反之，處於激活狀態。
hidden屬性為true的此類情況有：
1、 頁面最小化
2、頁面在后台運行
3、切換tab欄到其他頁面
hidden屬性為false的情況
1、當前頁面正常顯示，包括被其他應用擋住的情況。
visibilitychange事件的兼容性寫法
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (!document[hiddenProperty]) {
console.log('頁面激活');
}else{
console.log('頁面非激活')
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
這兩種判斷方法最大的不同就是在頁面被其他應用覆蓋的情況下，onblur是會觸發的，但是visibilitychange不會觸發。如果只是判斷頁面是否是打開狀態的話，visibilitychange事件是比較合適的。