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

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

一、原版分享

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

原版代码(可用代码①):

<!-- 标题动态切换代码 来自http://www.weeiy.com Open -->
<script type="text/javascript">eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('g(0).h(e(){e d(){0.9=0[b]?" (●—●) 你好,小伙伴!":a}f b,c,a=0.9;"2"!=4 0.8?(b="8",c="k"):"2"!=4 0.5?(b="5",c="j"):"2"!=4 0.6&&(b="6",c="l"),("2"!=4 0.7||"2"!=4 0[b])&&0.7(c,d,!1)});',22,22,'document||undefined||typeof|mozHidden|webkitHidden|addEventListener|hidden|title|||||function|var|jQuery|ready|Hi|mozvisibilitychange|visibilitychange|webkitvisibilitychange'.split('|'),0,{}))</script>
<!-- 标题动态切换代码 来自http://www.weeiy.com End -->

部署方法:

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

更多表情:

(=・ω・=)
_(:3」∠)_
(。・ω・。)
(°∀°)ノ
(´;ω;)
(´・_・)

注:以上内容来自微饭的分享:《WordPress 优化:为你的标题添加动态切换效果!

二、改进分享

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

那就稍微小改动一下,增加一个获取原始标题的变量 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.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)
});

部署后,若发现提示 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;
    "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)
});

当然也可以混淆加密一下保持神秘性。比如,先混淆再加密的代码如下:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('w(0).x(5(){5 d(){"y://k.n/"!=s.v&&(0.6=0[a]?"o(\\A\\C)o \\E\\g\\h\\i\\j,\\f\\l\\m\\4\\4\\p!\\q\\r"+c+"\\t":c)}u a,b,c=0.6;"2"!=3 0.8?(a="8",b="z"):"2"!=3 0.9?(a="9",b="B"):"2"!=3 0.e&&(a="e",b="D");"2"==3 0.7&&"2"==3 0[a]||0.7(b,d,!1)});',41,41,'document||undefined|typeof|u770b|function|title|addEventListener|hidden|mozHidden|||||webkitHidden|u56de|u6545|u800c|u77e5|u65b0|zhangge|u5934|u518d|net||u5427|u2192|u300a|location|u300b|var|href|jQuery|ready|http|visibilitychange|u2229_|mozvisibilitychange|u2229|webkitvisibilitychange|u6e29'.split('|'),0,{}))

如果你喜欢这种混淆加密的赶脚,可以试试这个流弊强悍的在线工具:http://tool.lu/js/

三、惯例小结

喜欢动脑筋的朋友有没有看出这个功能的优点呢?当用户在博客在新标签点开另一篇文章时,之前打开的文章标题就会自动变成【o(∩_∩)o 温故而知新,回头再看看吧!→《之前的文章标题》】,在挑起用户好奇的同时,略微提高文章的回头率。

当然,弊端也是固然存在的,当一次性打开多个网页时,不但标签页会自动变窄导致看不全,而且看起来全部都一个样,导致用户想回头找一下刚刚看过的文章都必须用鼠标聚焦或点击查看。

好了,分享就到这里结束了,个中利弊就只能自己取舍了!喜欢折腾的朋友赶紧试试吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

用Python爬取东方财富网上市公司财务报表

摘要: 现在很多网页都采取JavaScript进行动态渲染,其中包括Ajax技术。有的网页虽然也用Ajax技术,但接口参数可能是加密的无法直接获得,比如淘宝;有...

1.9K30
来自专栏程序员的SOD蜜

“老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春

火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀...

42060
来自专栏前端说吧

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?!

67330
来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

28760
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第三篇

接着上节的继续学习, 一 重构:模块game_functions 在大型项目中,经常需要在添加新代码前重构既有代码。重构旨在简化既有代码的结构,使其更容易扩展。...

34590
来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)

概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取,然后在使...

44950
来自专栏向治洪

iOS开发入门笔记

iOS开发入门笔记 本文面向已有其它语言(如Java,C,PHP,Javascript)编程经验的iOS开发初学者,初衷在于让我的同事一小时内了解如何开始开发i...

48960
来自专栏听雨堂

从MapX到MapXtreme2004[2]-图层操作

Mapx中基本的图层操作还是比较简单的,集中在对Layers和Layer的处理上,对别的没有太多要求。   在MapXtreme中,要完成类似功能,发生了一点...

22980
来自专栏张善友的专栏

在OpenOffice.org和微软Office之间共享文档

原文:Sharing files between OpenOffice.org and Microsoft Office。翻译可能也比较随意。 本文版权请向原文...

22070
来自专栏xx_Cc的学习总结专栏

iOS-世界那么大,CoreLocation带你去看看

30790

扫码关注云+社区

领取腾讯云代金券