做到 是大屏项目,用的websocket,在浏览器切换标签窗口后,过了一段时间回来,页面会非常卡,所以想页面切回来的时候刷新页面,找到了这个方法,这是原来的例子。这段代码可以自己复制去做下测试

var normal_title;
document.addEventListener('visibilitychange',function(){ //浏览器切换事件
if(document.visibilityState=='hidden') { //状态判断
normal_title=document.title;
document.title='隐藏的标题';
}else {
document.title=normal_title;
}
});

下面是我项目中的

document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden') {
if(ws){
ws.close(); //关闭websocket
}
}else { location.reload(); //刷新页面
}
});

浏览器标签tab窗口切换时事件状态侦听的更多相关文章

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

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

  2. selenium WebDriver 对浏览器标签页的切换

    关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...

  3. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  4. 关于饿了么在浏览器标签页失去焦点时网页Title改变的实现方法

    说在前面:必须是基于支持H5的浏览器才可以 这个 API 本身非常简单,由以下三部分组成. document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小 ...

  5. Fragment实现底部Tab,切换可保存状态

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  6. Laravel 事件侦听的几个方法 [Trait, Model boot(), Observer Class]

    1 Trait 1.1 可以在 Trait 中定义一个静态的 bootFooBar() 方法,注:FooBar 是你的 Trait 名称 namespace App\Traits; use App\A ...

  7. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  8. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  9. (转)js控制窗口失去焦点(包括屏蔽Alt+Tab键切换页面)

    本章内容转自:http://www.cnblogs.com/BoKeYuanVinson/articles/3360954.html 转载自网络贴吧: 页面脚本是无法截获alt键的,不过可以变通一下, ...

随机推荐

  1. mysql ER图

        ER 图 ER图也被称为实体-联系图,提供了表示实体类型.属性和联系的方法,下图就是典型的一张ER图. ER图主要由四个成分构成: 1 实体 实体是客观世界中存在的各种事物,或者某个抽象事件, ...

  2. Spring Boot 入门之整合 log4jdbc 篇(六)

    博客地址:http://www.moonxy.com 一.前言 Spring Data JPA 默认采用 Hibernate 实现.Hibernate 的 showSql 配置只打印 SQL,但并不打 ...

  3. C++类拷贝控制 深拷贝 浅拷贝

    普通类型对象之间的复制很简单,而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量,这篇文章将帮你理清C++类对象的拷贝方式 拷贝构造函数,拷贝赋值运算符 首先我们简单了解下默认的拷贝 ...

  4. mysql-connector-java-5.-bin.jar 下载方法

    访问https://downloads.mysql.com/archives/c-j/,选择相应版本,如图 加油zip即可得到

  5. Python3.7.4入门-0/1To Begin/数据类型与结构

    0 To Begin //:向下取整除法 **:乘方 在交互模式下,上一次打印出来的表达式被赋值给变量 _ 如果不希望前置了 \ 的字符转义成特殊字符,可以使用 原始字符串 方式,在引号前添加 r 即 ...

  6. 3D 飞行器航迹规划

    3D-Route-Planning 三维航迹规划 -Matlab 本次代码主要解决数学建模中多约束条件下的航迹规划问题 解决的问题如下:   复杂环境下航迹快速规划是智能飞行器控制的一个重要课题.由于 ...

  7. elasticsearch倒排索引与TF-IDF算法

    elasticsearch专栏:https://www.cnblogs.com/hello-shf/category/1550315.html 一.倒排索引(Inverted Index)简介 在关系 ...

  8. 开源流媒体Red5-编译和部署

    源码下载地址:https://github.com/Red5/red5-server 使用工具:IntelliJ IDEA 下载源码后直接用IDEA打开,等待全部加载完成后 编译看是否报错,应该没什么 ...

  9. Python人工智能第一篇:语音合成和语音识别

    Python人工智能第一篇:语音合成和语音识别 ​ 此篇是人工智能应用的重点,只用现成的技术不做底层算法,也是让初级程序员快速进入人工智能行业的捷径.目前市面上主流的AI技术提供公司有很多,比如百度, ...

  10. Django序列化&django REST framework

    第一章.Django序列化操作 1.django的view实现商品列表页(基于View类) # 通过json来序列化,但手写字典key代码量较大,容易出错:还有遇到时间,图片序列化会报错 from g ...