JavaScript监听页面可见性(焦点)同时改变title的三种方法


本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

  • onfocus onblur

    window.onfocus = function() {
    console.log("onfocus");
    document.title="在这";
    };
    window.onblur=function(){
    console.log("onblur");
    document.title="离开了";
    }

    通过改变标签页 title 可清楚看到变化

    下面是html5提供的方法


  • visibilitychange 事件

    浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。经测试(Chorme),浏览器最小化也会触发该事件。

    可以用addEventListener()向document添加监听事件,也可以直接写成document.onvisibilitychange = function() {......}

  1. document.hidden

    如果页面处于被认为是对用户隐藏状态时返回true,否则返回false。
    
    使用addEventListener向document添加监听事件,false是addEventListener默认的一个参数,可以不写
    function handleVisibilityChange() {
    if (document.hidden) {
    document.title="离开了";
    } else {
    document.title="在这";
    }
    }
    document.addEventListener("visibilitychange", handleVisibilityChange, false);
  2. document.visibilityState

    是一个用来展示文档可见性状态的字符串。可能的值:
    
    visible : 页面内容至少是部分可见。 在实际中,这意味着页面是非最小化窗口的前景选项卡。
    hidden : 页面内容对用户不可见。 在实际中,这意味着文档可以是一个后台标签,或是最小化窗口的一部分,或是在操作系统锁屏激活的状态下。
    prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender,但绝不会从其它值转为该值。
    function handleVisibilityChange(){
    if(document.visibilityState=="hidden"){
    document.title="离开了";
    }
    if(document.visibilityState=="visible"){
    document.title="在这";
    }
    }
    document.addEventListener("visibilitychange", handleVisibilityChange, false);

  • 下面是MDN的demo,离开界面,视频暂停

    含有兼容代码,值得一看

    // 设置隐藏属性和改变可见属性的事件的名称
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    } var videoElement = document.getElementById("videoElement"); // 如果页面是隐藏状态,则暂停视频
    // 如果页面是展示状态,则播放视频
    function handleVisibilityChange() {
    if (document[hidden]) {
    videoElement.pause();
    } else {
    videoElement.play();
    }
    } // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
    // 处理页面可见属性的改变
    document.addEventListener(visibilityChange, handleVisibilityChange, false); // 当视频暂停,设置title
    // This shows the paused
    videoElement.addEventListener("pause", function () {
    document.title = 'Paused';
    }, false); // 当视频播放,设置title
    videoElement.addEventListener("play", function () {
    document.title = 'Playing';
    }, false); }

JavaScript监听页面可见性(焦点)同时改变title的三种方法的更多相关文章

  1. 浏览器,tab页显示隐藏的事件监听--页面可见性

    //监听浏览器tab切换,以便在tab切换之后,页面隐藏的时候,把弹幕停止 document.addEventListener('webkitvisibilitychange', function() ...

  2. C#在Winform中改变Textbox高度三种方法

    最近在做C# Winform项目,需要有一个能动态调整大小的Textbox,并且要是单行的.试了几次,单行模式的Textbox不能直接改高度.于是搜索了一下,整理出几个改变高度的方法. 1.将Text ...

  3. 页面加载即执行JQuery的三种方法

    [1]$(function( ){ }): $(function(){ $("#name").click(function(){ //adding your code here } ...

  4. 打印web页面指定区域的三种方法

    本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...

  5. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  6. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  7. webview缓存及跳转时截取url地址、监听页面变化

    缓存及一些设定 我在做一些项目时,h5做的项目手机浏览器能使用,但是在搬到webview时候不能用,这个时候通过查阅资料,原来是webview没有设定好,包括缓存.缓存大小及路径等等 mWebview ...

  8. angular2监听页面大小变化

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngO ...

  9. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

随机推荐

  1. laravel设置excel高度

    <?php use App\Services\UploadService; use Maatwebsite\Excel\Facades\Excel; class ExcelTest extend ...

  2. centos8平台使用iotop监控磁盘io

    一,iotop的作用: iotop是监视磁盘I/O使用状况的top类工具, 可以针对进程和线程统计io的使用情况 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblog ...

  3. python爬虫获取下一页

    from time import sleep import faker import requests from lxml import etree fake = faker.Faker() base ...

  4. Centos6.X 手动升级gcc

    操作环境 CentOS6.5 64bit,gcc原版本为4.4.7,不能支持C++11的特性,所以需要升级 [root@zengxj ~]# wget http://ftp.gnu.org/gnu/g ...

  5. printStackTrace()造成的并发瓶颈

    一 背景 在一次活动前的压测中,发现一个服务(平响为250ms左右)存在并发瓶颈,单实例的QPS压力从20升高到40后服务就雪崩了(平响急剧升高). 通过<jstack -F>命令查看线程 ...

  6. 关于Python的面相对象编程

    Python 其实不是面向对象的语言,更像是C语言的面向过程编程的语言 但 Python 也支持 class 关键字来实现类的声明与创建 但 Python 的对象更像是 JavaScript 的函数 ...

  7. CTF-misc:老板,再来几道misc玩玩

    [BJDCTF 2nd]最简单的misc-y1ng 得到一个图片,提示格式损坏,修补一下文件头 然后得到一张图片 直接python16进制转字符串 >>> string = &quo ...

  8. json针对list map set 应用

    package JSONtest; import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; im ...

  9. freopen ()函数

    1.格式 FILE * freopen ( const char * filename, const char * mode, FILE * stream ); 2.参数说明 filename: 要打 ...

  10. 【CF1445D】Divide and Sum 题解

    题目链接 题意简介 将一个长度为 2n 的数列平均分为两个子数列 p 和 q 后,p 按从小到大排序,q 按从大到小排序. 排序后,记 p 为 \(\{x_i\}\) ,q 为 \(\{y_i\}\) ...