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判断手机客户 ...
随机推荐
- 【JS基础】类型转换——不同数据类型比较
小试牛刀 输出下列数据比较结果 [] == 0; //==============================================================true [] == ...
- 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 ...
- BIZHUB184打印机提示维修召唤(m2)修复
其他不用管,按照操作直接干:菜单键--常用设置--左键---左键---常用设置--左键---右键 咦 神奇的进入了service mode 服务模式 选择CLEAR DATA 项---- ...
- March 07th, 2018 Week 10th Wednesday
Better later than never. 亡羊补牢,时犹未晚. Time and again all of us are told to complete the tasks assigned ...
- 13.scrapy框架的日志等级和请求传参
今日概要 日志等级 请求传参 如何提高scrapy的爬取效率 今日详情 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是s ...
- vuex最简单的
https://segmentfault.com/a/1190000009404727 "dependencies": { "axios": " ...
- 如何用Ant Design Pro框架做项目省力
1.熟悉React所有语法,以及redux.redux-saga.dva.一类的库的能力 2.灵活运用该框架提供的基础UI组件,想方设法利用现有的UI组件进行组合,尽可能减少工作量
- python入门学习:6.用户输入和while循环
python入门学习:6.用户输入和while循环 关键点:输入.while循环 6.1 函数input()工作原理6.2 while循环简介6.3 使用while循环处理字典和列表 6.1 函数in ...
- Leetcode:234 回文链表
leetcode:234 回文链表 关键点:请判断一个链表是否为回文链表.示例 1:输入: 1->2输出: false示例 2:输入: 1->2->2->1输出: true. ...
- 转://Oracle 高可用技术与云基础架构
众所周知Oracle云基础架构已经在越来越多的行业里应用.大家了解云基础架构是如何演进的嘛?可能有人会说Oracle高可用技术是组成云架构的基础,那它们的关系是怎么样的?大家又了解Oracle高可用技 ...