js判断当前浏览器页面是否切换
公司做mifi设备,ui界面很多信息需要1S钟不断异步请求更新信息,如果同时打开多个浏览器或者多个当前界面,设备1S钟会收到很多个请求,由于设备本身内存限制,会导致响应速度过慢,且会造成设备重启等。
所以需要我们只对停在当前界面的页面请求进行处理,其他切换掉的界面不再下发请求。
这方面的应用还有切换或最小化视频页面暂停播放,打开当前页签视频继续播放等。
页签切换或触发浏览器的 visibilitychange 事件
window.addEventListener("visibilitychange",function(){
console.log(document.hidden)
});
判断当前页面是否切换为可见:
1)document.hidden
返回值为true:表示被隐藏,不可见
返回值为false:表示未被隐藏,可见
2)document.visibilityState
返回值有 visible:表示是可见状态
返回值为 hidden:表示隐藏状态

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

js判断当前浏览器页面是否切换的更多相关文章
- 360极速浏览器UA怪异以及如何用js判断360浏览器
本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...
- 笔记:1.css样式,最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法
表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- 通过JS判断当前浏览器的类型
通过JS判断当前浏览器的类型,对主流浏览器Chrome.Edge.Firefox.UC浏览器.QQ浏览器.360浏览器.搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器. 不同浏览器的 ...
- js判断用户关闭页面或浏览器
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- js判断移动端页面按home键切换到桌面事件
---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...
- js 判断微信浏览器(转)
最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safa ...
- js判断当前浏览器是pc端还是移动端
根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript ...
- js判断手机浏览器操作系统和微信浏览器的方法
做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...
随机推荐
- 商家服务无法上架提示没有授权信息解决FAQ
1.地址授权:https://openauth.alipay.com/oauth2/appToAppAuth.htm?app_id=2018032002416255&redirect_uri= ...
- OpenSSL 正确安装
经过几天的各种尝试,总算正常安装了openssl,中途差点各种放弃,最后总算装好了. 环境:Win10 , 为了装OpenSSL 而安装了vs2010,没有验证必须要装的 安装步骤: .从openss ...
- c/c++ lambda 表达式 剖析
lambda 表达式 剖析 大前提:捕获列表里变量的确定时机. 捕获列表和参数列表有区别,捕获列表里的变量,是在捕获的时间点就确定了,而不是在lambda调用时确定,参数列表是在调用时才确定.所以当捕 ...
- c/c++ 模板与STL小例子系列<一 >自建Array数组
c/c++ 模板与STL小例子系列 自建Array数组 自建的Array数组,提供如下对外接口 方法 功能描述 Array() 无参数构造方法,构造元素个数为模板参数个的数组 Array(int le ...
- c/c++ 浅拷贝
c/c++ 浅拷贝 编译器合成的拷贝构造函数和=重载函数,只是做如下处理: 对象1.成员变量a = 对象2.成员变量a 如果成员变量a是指针,执行完拷贝构造函数或者*=重载函数**后,对象1和对象2的 ...
- c/c++叉树的创建与遍历(非递归遍历左右中,不破坏树结构)
二叉树的创建与遍历(非递归遍历左右中,不破坏树结构) 创建 二叉树的递归3种遍历方式: 1,先中心,再左树,再右树 2,先左树,再中心,再右树 3,先左树,再右树,再中心 二叉树的非递归4种遍历方式: ...
- 监控MySQL或Web服务是否正常
在工作中,我们往往利用脚本定时监控本地.远端数据库服务端或Web服务是否运行正常,例如:负载高.cup高.连接数满了等.... 方法一:根据端口 本地:netstat/ss/lsof ① nets ...
- Windows和Linux之间 rsync数据同步
转载于 https://www.linuxidc.com/Linux/2014-01/95722p2.htm rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——rem ...
- 《软工实践》第零次作业 - 一些QA
<软工实践>第零次作业 - 一些QA Q&A (1)回想一下你初入大学时对计算机专业的畅想 当初你是如何做出选择计算机专业的决定的? 你认为过去两年中接触到的课程是否符合你对计算机 ...
- IOC的底层实现