document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。

document.visibilityState:表示下面 4 个可能状态的值

hidden:页面在后台标签页中或者浏览器最小化

visible:页面在前台标签页中

prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded:页面正在从内存中卸载

Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。

这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。

document.addEventListener('visibilitychange', function() {
var isHidden = document.hidden;
if (isHidden) {
document.title = '当焦点不在当前窗口时的网页标题';
} else {
document.title = '再变回来或者做点其他的';
}
});
 
var show=function(){
 //显示数据
};
var timer = null;
var loopHandle = function () {
  //判断浏览器在当前前台显示
if (document.visibilityState === 'visible') {
    //调用方法
show();
    //间隔函数轮询显示数据
setInterval(function () {
show();
}, );
console.log('轮询开始');
}
else {
    //终止间隔函数
  clearTimeout(timer);
 timer = null;
  console.log('轮询停止');
}
};
//addEventListener() 方法用于向指定元素添加事件句柄。
//visibilitychange事件判断页面可见性

//浏览器标签页被隐藏或显示的时候会触发visibilitychange事件
 // 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

document.addEventListener('visibilitychange', function (e) {
loopHandle();
});
loopHandle(); //添加点击事件
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
visibilitychange事件的一些应用场景:
1.网站有图片轮播效果,只有在用户观看轮播的时候,才会自动展示下一张幻灯片。
2.显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
3.页面想要检测是否正在渲染,以便可以准确的计算网页浏览量(埋点使用场景)。
4.当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕)

document.visibilityState 监听浏览器的更多相关文章

  1. document.visibilityState 监听浏览器最小化

    document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器). do ...

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

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

  3. 【hugo】- hugo 监听浏览器切换title

    hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...

  4. 监听浏览器tab切换

    监听浏览器切屏 为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口 if (document.hidden !== undefined) { document.addEve ...

  5. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  6. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  7. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  8. JS监听浏览器标签页的显示与隐藏

    /** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...

  9. JS 监听浏览器各个标签间的切换

    以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性 ...

随机推荐

  1. scrapdy部署爬虫项目

    原文:https://blog.csdn.net/JLaiRen/article/details/82902321 scrapyd安装 打开命令行工具输入命令:pip install scrapyd ...

  2. spring security (BCryptPasswordEncoder)加密及判断密码是否相同

    通过BCryptPasswordEncoder的加密的相同字符串的结果是不同的,如果需要判断是否是原来的密码,需要用它自带的方法. 加密: BCryptPasswordEncoder encode = ...

  3. Java内存溢出java.lang.OutOfMemoryError: PermGen space

    今天把以前的一个项目部署在tomcat,启动没问题.因为用到了webservice,当调用webservice中的方法时一直报内存溢出异常 Exception in thread "http ...

  4. 2018.10.26 浪在ACM 集训队第二次测试赛

    2018.10.26 浪在ACM 集训队第二次测试赛 整理人:苗学林 A海港 参考博客:[1]:李继朋https://www.cnblogs.com/violet-acmer/p/9859006.ht ...

  5. es6笔记 day3---对象简介语法以及对象新增

    以前的老写法↓ 新写法来了↓ 提示:千万不要手贱,在里面去用箭头函数!!! -------------------------------------------------------------- ...

  6. mysql常用基础语句学习

    常用sql语句 查询: SELECT 列名(或者*,表示所有列) FROM 表名 WHERE 筛选条件; FROM 表名:顾名思义,就是从表名指定的这张表格中: WHERE 筛选条件:意思是" ...

  7. CF809D Hitchhiking in the Baltic States

    CF809D Hitchhiking in the Baltic States CF809D 长度为n的序列{xi},n<=3e5,范围在(li,ri)之间,求LIS最长是多长g(i,l)表示前 ...

  8. 游戏《Minecraft》或其他应用程序 实现 自动更新 客户端版本

    本渣又来写(水)博客了. 先说一下,我这个解决方案的安全性并不是企业级的,咱们就是一群穷开服的Minecraft玩家. 如果你要投入到企业级应用(容易被黑客攻击的场景),请自己写,思路凑合看看.不然安 ...

  9. Android利用Fiddler进行网络数据抓包,手机抓包工具汇总,使用mono运行filddler

    Fiddler抓包工具 Fiddler抓包工具很好用的,它可以干嘛用呢,举个简单例子,当你浏览网页时,网页中有段视频非常好,但网站又不提供下载,用迅雷下载你又找不到下载地址,这个时候,Fiddler抓 ...

  10. python 多线程两种实现方式,Python多线程下的_strptime问题,

    python 多线程两种实现方式 原创 Linux操作系统 作者:杨奇龙 时间:2014-06-08 20:24:26  44021  0 目前python 提供了几种多线程实现方式 thread,t ...