[代码]JS代码实现浏览器网页标题的动态切换，略微提高网站粘性

前几天在微饭天空看到一个让我眼前一亮的分享，自己拿过来用了几天之后，感觉挺有意思，现在我略微改进一下并分享出来，方便更多人自定义成自己喜欢的内容。

一、原版分享

功能描述：当网页标签失去焦点切换到指定的标题，获得焦点时即恢复正常标题

原版代码（可用代码①）：

<!— 标题动态切换代码来自http://www.weeiy.com Open –>

<!— 标题动态切换代码来自http://www.weeiy.com End –>

部署方法：

将以下代码加入主题下的footer.php或者header.php文件中即可（Ps：添加到Jquery.js之后，否则无效）。

二、改进分享

说是改进，其实也就是加入了我的一些理解，所谓萝卜白菜各有所爱，喜欢哪个就用哪个吧！我加入这个功能后，发现同时打开多个博客网页会带来影响用户体验的尴尬：未激活的标签标题全部显示“(●—●) 你好，小伙伴！”这种相同的标题，不点击看看还真不知道是哪个页面。

那就稍微小改动一下，增加一个获取原始标题的变量 title，并组合起来一起展示，至少把鼠标放上去能够知道该页面到底是哪篇文章，效果如下：

当然，只修改微饭分享的代码中的文字描述，很可能会报错或展示成undefined啥啥啥。

我先将原版代码解密一下：

jQuery(document).ready(function() {

function d() {

document.title = document[b] ? ” (●—●) 你好，小伙伴！” : a

}

var b, c, a = document.title;

“undefined” != typeof document.hidden ? (b = “hidden”, c = “visibilitychange”) : “undefined” != typeof document.mozHidden ? (b = “mozHidden”, c = “mozvisibilitychange”) : “undefined” != typeof document.webkitHidden && (b = “webkitHidden”, c = “webkitvisibilitychange”), (“undefined” != typeof document.addEventListener || “undefined” != typeof document[b]) && document.addEventListener(c, d, !1)

});

这样就直观多了，然后在自定义内容后拼接原始标题(变量a、b 或 d)即可（可用代码②）：

jQuery(document).ready(function() {

function c() {

document.title = document[a] ? “o(∩_∩)o 温故而知新,回头再看看吧!→《” + d + “》” : 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)

});

你可以将代码中的提示文字改成你喜欢的，并在浏览器开发者模式【F12 】下的控制台（console）中粘贴并回车，然后切换网页标题就能实时看到效果了：

为了进一步提高用户体验，我们还可以排除首页，在多个窗口都出现自定义标题的时候，至少还可以快速定位到首页，所以我将代码继续小改如下（可用代码③）：

jQuery(document).ready(function() {

function c() {

/* 排除首页（记得自行修改下首页地址） */

if (location.href != “http://zhangge.net/”) { document.title = document[a] ? “o(∩_∩)o 温故而知新,回头再看看吧!→《” + d + “》” : d }

}

var a, b, d = document.title;

“undefined” == typeof document.addEventListener && “undefined” == typeof document[a] || document.addEventListener(b, c, !1)

});

部署后，若发现提示 undefined，很可能是编码问题，可以将代码先编码一下：

jQuery(document).ready(function() {

function c() {

if (location.href != “http://zhangge.net/”) { document.title = document[a] ? “o(\u2229_\u2229)o \u6e29\u6545\u800c\u77e5\u65b0,\u56de\u5934\u518d\u770b\u770b\u5427!\u2192\u300a” : d }

}

var a, b, d = document.title;