切换浏览器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