JS 捕獲瀏覽器焦點事件

方法一

監聽 window.onfocus() 和window.onblur()事件實現

• 當前窗口得到焦點

window.onfocus = function() { 
  // 開始計時或者播放
};

• 當窗口失去焦點

window.onblur = function() { 
  //停止計時或者播放
};

• 缺點
  由於是判斷焦點，如果是在當前頁面上鋪上一個小窗口，那當前頁面就暫停了動畫，試想，如果你一邊看片，一邊開個聊天窗口與MM聊天，當你操作聊天窗口的時候，視頻暫停了，這並不是你想要的效果。

方法二

使用HTML5的Page Visibility API來實現

這個 API 本身非常簡單，由以下三部分組成。

• document.hidden：表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在後臺標籤頁中 或者 瀏覽器最小化 （注意，頁面被其他軟件遮蓋並不算隱藏，比如打開的 sublime 遮住了瀏覽器）。

• document.visibilityState：表示下面 4 個可能狀態的值

名稱	描述
hidden	頁面在後臺標籤頁中或者瀏覽器最小化
visible	頁面在前臺標籤頁中
prerender	頁面在屏幕外執行預渲染處理 document.hidden 的值爲 true
unloaded	頁面正在從內存中卸載

• Visibilitychange事件：當文檔從可見變爲不可見或者從不可見變爲可見時，會觸發該事件。

利用Visibilitychange事件獲取窗口焦點

window.addEventListener('visibilitychange', function() {
    if (document[hidden]){
       	// 失去焦點
    } else {
        // 獲取焦點
    }
});