标签: 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