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

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

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

visible:页面在前台标签页中

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

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

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

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

1 document.addEventListener('visibilitychange', function() {
2 var isHidden = document.hidden;
3 if (isHidden) {
4 document.title = '当焦点不在当前窗口时的网页标题';
5 } else {
6 document.title = '再变回来或者做点其他的';
7 }
8 });

只要懂得了原理, 怎么做都随你!~

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

  1. document.visibilityState 监听浏览器

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

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

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

  3. 监听浏览器tab切换

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

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

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

  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. Objective-C MacOS以管理员权限执行程序

    在MacOS下非常多操作是须要管理员权限的, 比方我们执行chmod.在命令行下能够使用sudo chmod来申请以管理员权限执行.可是使用XCode写的程序是不能使用sudo的. 须要自己写代码来申 ...

  2. C# ToString()格式设置大全

    C 货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...

  3. 格林威治时间(GTM)转北京时间

    需要模块:pytz(三方)和datetime import pytz import datetime time = "Tue, 12 Jun 2012 14:03:10 GMT" ...

  4. scala实现相邻两个元素挑换位置的代码,哈哈

    import scala.math._ import breeze.plot._ import breeze.linalg._ import scala.collection.mutable.Arra ...

  5. eclipse 访问 hive1.2.1

    参考链接1.http://www.iteblog.com/archives/846 操作实际参考代码:http://sunhs.sinaapp.com/?p=343 配置eclipse 搞1天, 不管 ...

  6. UNIX环境编程学习笔记(20)——进程管理之exec 函数族

    lienhua342014-10-07 在文档“进程控制三部曲”中,我们提到 fork 函数创建子进程之后,通常都会调用 exec 函数来执行一个新程序.调用 exec 函数之后,该进程就将执行的程序 ...

  7. windows上完美的X-server服务器软件:MobaXterm

    这个软件 太 TMD 好了 . 干净.绿色.小巧. X-server 软件.想知道如何用不,直接打开运行该软件,这样就Enough了!

  8. ThreadLocal用法

    使用ThreadLocal能实现线程级别的变量定义,同一个类的私有静态变量,在不同的线程中值可以不同. 1.学习文章:http://blog.csdn.net/qjyong/article/detai ...

  9. less语法(一)变量与extend

    摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...

  10. rpc框架 SimpleXMLRP

    一台电脑去控制另一台电脑干事情,最常见的就是web. 用户get/post一个url,服务端根据url地址和参数去做相应的事情把结果返回给客户端. server.py #coding=utf8 fro ...