JS代码实现浏览器切换页面时网页标题动态切换

onfocus 和 onblur 事件，监听离开页面和进入页面

<script>
var normalTitle = document.title
window.onfocus = function () {
    document.title = '(/≧▽≦/)咦！你又回来啦';
    setTimeout(function(){
        document.title = normalTitle;
    }, 1500);
};
window.onblur = function () {
    document.title = '等等，你别走啊！！';
};
</script>

使用 visibilitychange 事件

这种方法好像更实用些，当页面标签隐藏或显示就会触发该事件

<script>
document.addEventListener('visibilitychange',function(){
    if( document.visibilityState == 'hidden' ){
        normal_title = document.title;
        document.title = '哎哟，你别走嘛';
    }else{
        document.title = '(/≧▽≦/)咦！你又回来啦';
        setTimeout(function(){
            document.title = normal_title;
        }, 1200)
    }
});
</script>

或者

<script type="text/javascript">
    var OriginTitile=document.title;
var titleTime;
    document.addEventListener('visibilitychange',
     function(){
          if(document.hidden){
               document.title='哎哟，你别走嘛';
               clearTimeout(titleTime)
          }else{
               document.title='(/≧▽≦/)咦！你又回来啦！';
               titleTime=setTimeout(function(){document.title=OriginTitile},1200)
          }
     },!1);
</script>