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. Linux 系统安装配置PHP服务(源码安装)

    简介: PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要 ...

  2. 互联网公司GitHub repo 语言使用情况

    转自: https://laike9m.com/blog/hu-lian-wang-gong-si-github-repo-yu-yan-shi-yong-qing-kuang,56/ 现在基本上所有 ...

  3. MarkDown 使用说明示例

    一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 一级标题 这是 H2 这是 H3 一级和二级标题还有一种写法 就是下面加横杆,同时 超过2个的 = 和 - 都可以有效果. Thi ...

  4. Unreal发展史

    Unreal发展史 引子 四年前的一个深夜,或者说是一个早晨,Unreal的传奇开始了.它发生在马里兰州一个不起眼的市镇Rockvill,在一套公寓大楼里回响起一支墨西哥流浪乐队的曲子,那里住着Epi ...

  5. Mac eclipse 连接安卓手机调试 adb

    echo 手机厂商号 >>  ~/.android/adb_usb.ini  ~ echo 0x18d1 >>  ~/.android/adb_usb.ini 重启系统即可 环 ...

  6. javascript报错集锦

    1.JS 异常之 missing ) after argument list 错误释疑报错原因:不是字符串就输出啦

  7. mysql查询某个库的表个数

    SELECT COUNT(1) FROM information_schema.tables WHERE table_schema = 'leleli'; --解释:数据库名叫“leleli”

  8. getIsDebuggable

    /* * if set  android:debuggable="true" in  Manifest, return true. * if set android:debugga ...

  9. sql2008,sa不能使用:不能为主体 sa 中设置凭据

    打开属性对话框,为 SQL Server Administrator 帐户,然后您执行了"sa"登录使用 SQL Server Management Studio 工具.您修改为在 ...

  10. [OpenCV] Samples 06: logistic regression

    logistic regression,这个算法只能解决简单的线性二分类,在众多的机器学习分类算法中并不出众,但它能被改进为多分类,并换了另外一个名字softmax, 这可是深度学习中响当当的分类算法 ...