document.visibilityState 监听浏览器最小化
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 监听浏览器最小化的更多相关文章
- document.visibilityState 监听浏览器
document.hidden:表示页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器). do ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- 监听浏览器tab切换
监听浏览器切屏 为了完成验证用户在切换浏览器tab时进行登录再次认证需求需要监听浏览器切换窗口 if (document.hidden !== undefined) { document.addEve ...
- 【hugo】- hugo 监听浏览器切换title
hugo 博客 监听浏览器title 动态改变浏览器title标题 找到head.html themes/maupassant/layouts/partials/head.html 添加监听js 可以 ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- JS监听浏览器标签页的显示与隐藏
/** * 监听浏览器标签页的显示与隐藏 */ class ListenerPageVisibility { constructor () { // 设置隐藏属性和改变可见属性的事件的名称 this. ...
- JS 监听浏览器各个标签间的切换
以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性 ...
随机推荐
- Python——eventlet
eventlet语境下的“绿色线程”普通线程之间的区别: 1. 绿色线程几乎没有开销,不用像保留普通线程一样保留“绿色线程”,每一个网络连接对应至少一个“绿色线程”: 2. 绿色线程需要人为的设置使其 ...
- Linux 标准文件描述符
出于特殊目的,bash shell保留了最早的3个文件描述符0.1.2,如下所示: 1.STDIN标准输入 Shell从STDIN文件描述对应的键盘获得输入,在用户输入时处理每个字符. 范例1:cat ...
- android studio怎么导入appcompat-v7
方法1: 在项目的build.gradle文件里,用传统的自动依赖处理方式:compile ‘com.Android.support:appcompat-v7:+’,然后rebuild就可以了. 方法 ...
- Java Web入门必知
Java Web应用的核心技术是Java Server Page和Servlet.此外,开发一个完整的Java Web应该涉及一下几种概念及技术. 1.Servlet组件 Serv ...
- 大内核锁 BKL
参考:http://blog.csdn.net/universus/article/details/5623971 ...
- synchronized关键字的用法总结
synchronized关键字主要有以下这3种用法: 修饰实例方法,作用于当前实例加锁,进入同步代码前要获得当前实例的锁 修饰静态方法,作用于当前类对象加锁,进入同步代码前要获得当前类对象的锁 修饰代 ...
- QT 随机数生成
下面总结了QT中随机生成的方法(仅供学习参考),分为旧方法和新方法,一般来说,旧的方法已经被抛弃,在开发新的应用中推荐使用新方法. C++ Code 12345678910111213141516 ...
- 通过Nginx反向代理,IIS和apache 共用80端口
#user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...
- CentOS-6.4 安装 PHP Memcached 扩展
1.获取安装文件包 [root@phpdragon home]# wget https://launchpad.net/libmemcached/1.0/1.0.18/+download/libmem ...
- flexbox常用布局左右固定,中间自适应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...