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

时间:2023-03-09 05:58:28
JavaScript监听页面可见性(焦点)同时改变title的三种方法

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); }