JS两种方法实现切换浏览器窗口，改变页面标题

本文最后更新于2022.05.04-17:46，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

一，监听visibilitychange 事件

属性

1、document.hidden Boolen 返回值，true 和 false
2、document.visibilityState 参数
visible： 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡
hidden： 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，
或是在操作系统锁屏激活的状态下
prerender： 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态
为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的
unloaded： 页面正在从内存中卸载。 注释：浏览器支持是可选的

使用方法

<!--切换浏览器窗口时改变标题-->
<script>
var time;
var normar_title = '小刘爱编程 (*∩_∩*)欢迎你喔！';
document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'hidden') { 
         clearTimeout(time); 
         document.title = '客官请留步ε=ε=ε=┏(゜ロ゜;)┛';
    } else {
        document.title = '你终于回来了(。・∀・)ノ';
        time=setTimeout(function(){ document.title = normar_title; }, 3000);
    }
});
</script>

或者

<script type="text/javascript">
var time;
var normar_title = '小刘爱编程 (*∩_∩*)欢迎你喔！';
    document.addEventListener('visibilitychange',
     function(){
          if(document.hidden){
               clearTimeout(time)
               document.title = '客官请留步ε=ε=ε=┏(゜ロ゜;)┛';
               
          }else{
              document.title = '你终于回来了(。・∀・)ノ';
               time=setTimeout(function(){document.title=normar_title},3000)
          }
     },!1);
</script>

 二，通过获取window焦点，和失去焦点时触发

方法

1，onfocus() 事件在对象获得焦点时发生。
2，onblur() 事件会在对象失去焦点时发生。

使用方法

<script>
var time;
var normar_title = '小刘爱编程 (*∩_∩*)欢迎你喔！';
window.onfocus = function () {
    document.title = '你终于回来了(。・∀・)ノ';
    time=setTimeout(function(){
        document.title = normar_title;
    }, 3000);
};
window.onblur = function () {
    clearTimeout(time);
    document.title = '等等，你别走啊！！';
};
</script>