公司做mifi设备,ui界面很多信息需要1S钟不断异步请求更新信息,如果同时打开多个浏览器或者多个当前界面,设备1S钟会收到很多个请求,由于设备本身内存限制,会导致响应速度过慢,且会造成设备重启等。

所以需要我们只对停在当前界面的页面请求进行处理,其他切换掉的界面不再下发请求。

这方面的应用还有切换或最小化视频页面暂停播放,打开当前页签视频继续播放等。

页签切换或触发浏览器的 visibilitychange 事件

window.addEventListener("visibilitychange",function(){

  console.log(document.hidden)

});

判断当前页面是否切换为可见:

1)document.hidden

  返回值为true:表示被隐藏,不可见

  返回值为false:表示未被隐藏,可见

2)document.visibilityState

  返回值有 visible:表示是可见状态

  返回值为 hidden:表示隐藏状态

全过程代码,如下,(参考张鑫旭博客)

js判断当前浏览器页面是否切换的更多相关文章

  1. 360极速浏览器UA怪异以及如何用js判断360浏览器

    本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...

  2. 笔记:1.css样式,最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法

    表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...

  3. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  4. 通过JS判断当前浏览器的类型

    通过JS判断当前浏览器的类型,对主流浏览器Chrome.Edge.Firefox.UC浏览器.QQ浏览器.360浏览器.搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器. 不同浏览器的 ...

  5. js判断用户关闭页面或浏览器

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. js判断移动端页面按home键切换到桌面事件

    ---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...

  7. js 判断微信浏览器(转)

    最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safa ...

  8. js判断当前浏览器是pc端还是移动端

    根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript ...

  9. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

随机推荐

  1. 【JS基础】类型转换——不同数据类型比较

    小试牛刀 输出下列数据比较结果 [] == 0; //==============================================================true [] == ...

  2. DPA从DPA 10.0.352升级到DPA 11.0.373

    1: 解压安装文件SolarWinds-DPA-11.0.373-64bit.tar.gz [root@lnxmonitor tmp]# tar -xzvf SolarWinds-DPA-11.0.3 ...

  3. BIZHUB184打印机提示维修召唤(m2)修复

    其他不用管,按照操作直接干:菜单键--常用设置--左键---左键---常用设置--左键---右键      咦  神奇的进入了service mode  服务模式 选择CLEAR DATA 项---- ...

  4. March 07th, 2018 Week 10th Wednesday

    Better later than never. 亡羊补牢,时犹未晚. Time and again all of us are told to complete the tasks assigned ...

  5. 13.scrapy框架的日志等级和请求传参

    今日概要 日志等级 请求传参 如何提高scrapy的爬取效率 今日详情 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是s ...

  6. vuex最简单的

    https://segmentfault.com/a/1190000009404727 "dependencies": {    "axios": " ...

  7. 如何用Ant Design Pro框架做项目省力

    1.熟悉React所有语法,以及redux.redux-saga.dva.一类的库的能力 2.灵活运用该框架提供的基础UI组件,想方设法利用现有的UI组件进行组合,尽可能减少工作量

  8. python入门学习:6.用户输入和while循环

    python入门学习:6.用户输入和while循环 关键点:输入.while循环 6.1 函数input()工作原理6.2 while循环简介6.3 使用while循环处理字典和列表 6.1 函数in ...

  9. Leetcode:234 回文链表

    leetcode:234 回文链表 关键点:请判断一个链表是否为回文链表.示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true. ...

  10. 转://Oracle 高可用技术与云基础架构

    众所周知Oracle云基础架构已经在越来越多的行业里应用.大家了解云基础架构是如何演进的嘛?可能有人会说Oracle高可用技术是组成云架构的基础,那它们的关系是怎么样的?大家又了解Oracle高可用技 ...