云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

离开和进入html页面时改变title

  • 内容
  • 评论
  • 相关

原理:

使用了HTML5的Page Visibility API

目前页面可见性API有两个属性,一个事件,如下:

document.hidden: Boolean值,表示当前页面可见还是不可见

document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview

visibilitychange: 当可见状态改变时候触发的事件


    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile;
            clearTimeout(titleTime);
        }
        else {
            document.title = '(*´∇`*) 被你发现啦~ ' + OriginTitile;
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            }, 2000);
        }
    });

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:离开和进入html页面时改变title - https://wlphp.com/?post=109

发表评论

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