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. C#常用数据类型间的转换

    数据类型有很多种,数据类型间的转换也是有很多的方法,如果不细心整理的话等到用的时候再查就会显得很浪费时间,所以决心整理出这篇博文.主要是讲解常用数据类型之间的转换方法以及常见数据类型所占字节数. 字节 ...

  2. laravel-第一課安裝

    本地安装laravel,php环境要配置好,推荐xmapp一键搭建. 1.程序包直接从官方下载,官方开源地址:https://github.com/laravel/laravel(当然也可从此网站:h ...

  3. ngx-bootstrap学习笔记(一)-popover

    前言 这月做了个ng2模块,其中有个校验功能,当校验不通过时给出提示,项目中使用jQuery实现,今天才发现ngx-bootstrap已经有现成功能了,且可封装成通用组件放入shareModule,使 ...

  4. Linux I/O优化 磁盘读写参数设置

    关于页面缓存的信息,可以用cat /proc/meminfo 看到.其中的Cached 指用于pagecache的内存大小(diskcache-SwapCache).随着写入缓存页,Dirty 的值会 ...

  5. 4. Beego 框架之cookie与session

    what is cookie? cookie是存储在客户端的,用于标识客户身份的! what is session session 是存储在服务端,也是用于客户身份标识,用于跟踪用户会话. BeeGo ...

  6. ABBYY FineReader Pro for Mac系统要求

    ABBYY FineReader Pro for Mac作为先进的OCR图文识别软件,为各种各样的任务提供全面的解决方案,可轻松将纸质文档.PDF文件和数字文本照片转换为可编辑和可搜索的文件,替代了手 ...

  7. WIN7隐藏GUEST登录账户

    在Windows7中,我们有时候需要开启Guest用户,以方便给别的同事共享打印机和部分文件,但同时又不希望别人用Guest账号从本地登陆界面进入本机.这个时候就需要将本地登陆界面的Guest用户进行 ...

  8. HTML5 标准规范完成了

    ​    ​万维网联盟(W3C)昨天宣布,HTML5 标准规范终于最终制定完成了,并已公开发布.对于前端工程师来说,这无疑是一个振奋人心的好消息. ​    ​众所周知,HTML5改变了互联网,将成为 ...

  9. iOS开发 frame 与 bounds 的区别与关系 转自隔叶黄莺

    frame和bounds是UIView中的两个属性(property). frame指的是:该view在父view坐标系统中的位置和大小.(参照点是父亲的坐标系统) bounds指的是:该view在本 ...

  10. 架构设计:系统存储(28)——分布式文件系统Ceph(挂载)

    (接上文<架构设计:系统存储(27)--分布式文件系统Ceph(安装)>) 3. 连接到Ceph系统 3-1. 连接客户端 完毕Ceph文件系统的创建过程后.就能够让客户端连接过去. Ce ...