Logo

切换浏览器tab刷新实现

photo

2022年01月24日

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

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!
Python contains 2022年01月21日

一、__contains__  判断字符串中是否包含相应的字符。浏览量:1,046

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1973 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1918 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,799 作者:Pastore Antonio
1642 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1606 浏览量
Swagger2 接口多级分组方法 swagger无疑是Java开发的最佳伴侣,接口非常方便调试;当然也有用Postman,因人而异吧...Swagger2接口多级分组方法 作者:Pastore Antonio
1522 浏览量