公司做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. 前后端分离djangorestframework——序列化与反序列化数据

    我们写好后端的代码,要把数据交给前端的展示的,这个数据以什么类型给前端呢?学到这里,我们已经知道这个数据最好是json字符串才行,因为网络间的传输,只认字符串或者二进制,字符串就是我们的数据,二进制就 ...

  2. django数据查询之聚合查询和分组查询

    <1> aggregate(*args,**kwargs): 通过对QuerySet进行计算,返回一个聚合值的字典.aggregate()中每一个参数都指定一个包含在字典中的返回值.即在查 ...

  3. Latch导致MySQL Crash

    作者:沃趣科技数据库专家 董红禹 问题概述 最近我们遇到一个MySQL的问题,分析后很有代表意义,特地写出来供大家参考.出现问题是,数据库先是被置为只读,然后过了一段时间,MySQL直接Crash掉了 ...

  4. 基于SurfaceView的可拖动视频控件

    视频播放控件(一) 可拖动,变换SurfaceView public class DragSurfaceView extends SurfaceView implements View.OnTouch ...

  5. php 计算出一年中每周的周一日期

    最近接到一个任务,归纳起来,就是:要算出每年当中,每周的周一日期.想了一会,看了下date函数,深入了解了一下date函数各个参数的含义之后,终于把这道题做出来了! 在date()函数中,有一个参数对 ...

  6. (转载)关于usr/bin/ld: cannot find -lxxx问题总结

    usr/bin/ld: cannot find -lxxx问题总结 linux下编译应用程序常常会出现如下错误:   /usr/bin/ld: cannot find -lxxx        意思是 ...

  7. Cesium实现文字、点、多段线、多边形的实时绘制

    背景知识 点.线.面以及文字的实时绘制是GIS很重要的一个功能,是用户对感兴趣区域标注的业务需要.同时Cesium提供了点.线(多段线).面及文字(label)绘制的接口,绘制方式总共有两种,一种是通 ...

  8. 合并两个有序数组的golang实现

    给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n. ...

  9. python 基础操作--数据类型

    一.变量 1.定义:将运算的中间结果暂存到内存,以便后续程序调用. 2.命名规则 1.变量由字母.数字.下划线搭配组合而成: 2.不可以用数字开头,也不能全都是数字: 3.不能是python 关键字, ...

  10. Vue修改、编辑时,撤销修改内容,表格内容不变

    在编辑该行的过程中,突然不想编辑了,想点击撤销按钮,将该行数据恢复到旧值,目前的做法是,在点击编辑按钮的时候转换成json字符,点击撤销按钮的时候再解析成对象,赋值给该行的数据. // 编辑editH ...