如何在切换标签时改变原标题显示

切换标签时自动改变标题是个有趣的网站网页显示效果。

参考效果可以看本站,目前显示的是网站标题“茶克拉 | Earning Dollars Blog.”,当你切换到其他标签页的时候,原来本站的标签title就变成了“one more cup of tea…”

当然,可以编译更多有趣的表达“亲,快回来~”等等。

这是如何实现的呢?依靠的是,JavaScript离开当前页面时触发的函数

我们可以在页眉(header.php)或页脚(footer.php)加入一行JS代码,这样我们就可以实现这个效果了。

初级版本

<script>
    document.addEventListener('visibilitychange', function () {
    if (document.visibilityState == 'hidden') {
        normal_title = document.title;
        document.title = '亲,快回来~';
    } else document.title = normal_title;
});
</script>

中级版本

<script>
jQuery(document).ready(function() {
    function c() {
  if (location.href != "https://www.chakela.me/") { document.title = document[a] ? "亲,快回来" : d }
    }
    var a, b, d = document.title;
    "undefined" != typeof document.hidden ? (a = "hidden", b = "visibilitychange") : "undefined" != typeof document.mozHidden ? (a = "mozHidden", b = "mozvisibilitychange") : "undefined" != typeof document.webkitHidden && (a = "webkitHidden", b = "webkitvisibilitychange");
    "undefined" == typeof document.addEventListener && "undefined" == typeof document[a] || document.addEventListener(b, c, !1)
});
</script>

高级版本

<script>
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      $('[rel="icon"]').attr('href', "path/to/fail.ico");
      document.title = '亲,快回来看看';
      clearTimeout(titleTime);
    } else {
      $('[rel="icon"]').attr('href', "path/to/favicon.ico");
      document.title = '很高兴亲又回来了' + OriginTitile;
      titleTime = setTimeout(function () {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>

高级版本可以在切出的时候变更favicon标签图标,切回时显示“很高兴亲又回来了~”+“原标题”,然后2000毫秒后再回到“原标题”。

有兴趣快试试吧。

发表评论

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

+ 43 = 49