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

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

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

一、原版分享

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

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

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

部署方法:

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

更多表情:

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

二、改进分享

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

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

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

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

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

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

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

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

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

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

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

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

三、惯例小结

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

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:15   其中:访客  12   博主  3

  1. 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

    哈哈,在你发表这篇文章之前就被小雨我扒走啦。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      那你仔细看完文章有没有新的收获呢

      • 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

        为啥xiu主题不能获取当前页面标题呢?

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

          通用的

          • 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

            难道是代码的问题,你有空本地测试下 :razz:

  2. 夏日博客 5 来自天朝的朋友 谷歌浏览器 Windows XP 北京市海淀区 首都在线数据中心

    这东西就是一个JS特效,很久之前就折腾过,当时觉得好玩。

  3. 微饭 3 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市江津区 /巴南区电信

    :evil: 可以再研究研究滚动起来

  4. 瑾瑜 4 来自天朝的朋友 火狐浏览器5.0 Windows 8.1 安徽省合肥市 中国科学技术大学

    这个挺好玩,tool.lu之前看过,很全面的工具啊~

  5. 脑精网 1 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省邵阳市 电信

    刚无意间发现了一个特效,上面的盖楼模式,鼠标在转动的时候会放大缩小。

  6. 舍力博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 电信

    这个不错!转载去!

  7. 梦想网络 5 来自天朝的朋友 火狐浏览器 Windows 10 浙江省温州市 电信

    换主题了。。需要搬运的东西估计很多哇

  8. 二先生博客 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

    还不错,之前写js的时候,也研究过

  9. 云落 1 来自天朝的朋友 火狐浏览器 Windows 8.1 江苏省淮安市 电信

    这个其实是我从http://devework.com/那里扒来的,我贴一下原地址吧http://devework.com/html5-page-visibility-api.html都被玩坏了的东西

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      多谢告知

  10. 帅气小琦琦 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省 电信

    确实比较好玩 但是没有实际效果,估计也就是玩会儿

加载中,请稍候...