做到 是大屏项目,用的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. java线上cpu、内存问题排查方法

    一.线程 查进程中占用cpu高的线程 ps -mp xxxxx -o THREAD,tid,time | sort -rn 将线程的id从10位转到16位,可以在下面jstack中找到对应线程 输出线 ...

  2. WordPress对接微信小程序遇到的问题

    1.文章内容中的“<”和“>”字符显示问题 小程序是使用“wxPares工具来实现html转wxml的,如果你的文本包含了代码比如xml会携带<>符号,程序会将其转化,造成解析 ...

  3. 第八届蓝桥杯java b组第十题

    标题: k倍区间 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, Ai+1, ... Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍 ...

  4. [python]泡菜存储(pickle)

    对于保存文本,如果要保存的数据像列表,字典甚至是类的实例时,普通的文件操作就会很复杂,如果把这些转化为字符串写入到文本文件中保存,把这个过程反过来读取的话就会异常麻烦,因此python提供了一个标准模 ...

  5. [技术栈]C#利用Luhn算法(模10算法)对IMEI校验

    1.Luhn算法(模10算法) 通过查看ISO/IEC 7812-1:2017文件可以看到对于luhn算法的解释,如下图: 算法主要分为三步: 第一步:从右边第一位(最低位)开始隔位乘2: 第二步:把 ...

  6. .Net Core 跨平台:一个简单程序的多平台(windows、Linux、osx)发布

    .Net Core 跨平台:一个简单程序的多平台(windows.Linux.osx)发布 .Net Core 3.0 已于2019年9月23日发布了,包含了一些新特性,具体参见Announcing ...

  7. leveldb 源码--总体架构分析

    一 本文目的 对leveldb的总体设计框架分析(关于leveldb基本原理,此文不做阐述,读者可以自行检索文章阅读即可),对leveldb中底层数据存储数据格式,内存数据模型,compact,版本管 ...

  8. mybatis <=或这个>=提示错误Tag name expecte问题解决

    解决方案: 1.将<号或者>号进行转义 DATE_SUB(CURDATE(), INTERVAL 31 DAY) <= DATE(created) 2.使用<![CDATA[ ...

  9. Java基础学习笔记(六) - 数据结构和集合

    一.认识数据结构 1.数据结构有什么用? 合理的使用数据结构,可以更方便的查找存储数据. 2.常见的数据结构 数据存储常用结构有:栈.队列.数组.链表和红黑树. 栈:堆栈(stack),它是运算受限的 ...

  10. .NET进阶篇-语言章-2-Delegate委托、Event事件

    知识只有经过整理才能形成技能 整个章节分布简介请查看第一篇 内容目录 一.概述 二.解析委托知识点 1.委托本质 2.委托的使用 3.委托意义 逻辑解耦,减少重复代码 代码封装支持扩展 匿名方法和La ...