切換瀏覽器tab刷新實現

標簽： js

---

緣起

最近在做一個活動需求，需求交互有跨項目，跳轉到另一個項目里完成指定任務，再回來領取相應任務獎勵，產品十分反感要求用戶主動刷新瀏覽器才更新活動頁的任務信息。

解決方案

• 方案1：如果項目不考慮ie10以下瀏覽器，可以通過html5新增的Page Visibility API來實現,示例代碼如下:

document.addEventListener('visibilitychange', function() { 
  var isHidden = document.hidden; 
  if (!isHidden) { 
    // 做數據更新操作，重新發起請求或者直接刷新當前頁面
  } 
});

• 方案2：如果對兼容性有一定要求，則可以考慮換用當前窗口獲得焦點js事件，示例代碼如下:

//當前窗口得到焦點 
window.onfocus = function() { 
  // 做數據更新操作，重新發起請求或者直接刷新當前頁面 
}; 

• 方案3：做數據輪詢請求，每隔幾秒做一次數據更新。

• 方案4：可以和產品商量是否可以在想做切換刷新的區域放上一個刷新按鈕，點擊更新當前區域數據。

最終選擇

產品要求兼容IE8+，方式1放棄了，我又不想做輪詢刷新，增加服務器的壓力，方式3也放棄了，跟產品協商增加一個局部刷新按鈕，產品嫌棄丑，於是最終選擇方案2