Web

JS代码实现浏览器网页标题的动态切换,提高网站“回头率”

michaelliunsky · 10月14日 · 2022年 · · · · · 本文共1024个字 · 预计阅读4分钟642次已读

前几天偶然看到了一些网站离开页面的时候网站标题会动态切换,并提醒你回来看看,当时就觉得这种形式很有意思,于是稍微改动了一下源代码,在此分享出来。

改进分享

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

JS代码实现浏览器网页标题的动态切换,提高网站“回头率”

代码如下:

<script type="text/javascript">
jQuery(document).ready(function() {
    function c() {
        /* 排除首页(记得自行修改下首页地址) */
	if (location.href != "https://blog.mkliu.top/") { document.title = document[a] ? "回来再看看吧!→《" + 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)
});
</script>

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

JS代码实现浏览器网页标题的动态切换,提高网站“回头率”

至此,就实现了效果。

总结

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

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

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

0 条回应