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>

标签

发表评论

电子邮件地址不会被公开。 必填项已用*标注