离开网页后改变页面的标题title的特效代码

搞开发 0 赞 (9) 387字  预计1分钟 88

有些网站为了吸引用户,当访客点击其他网页的时候,就会把网页标题自动切换成一段自定义的文字句子。目的是引起用户注意,挽留网站的访客。

这种效果怎么实现的呢?
其实根据浏览器标签页的切换来改变标签页的title看到一个很有意思的HTML5事件,visibilitychange事件在当前网页在可见和不可见之间变换的时候调用,比如用户切换到其他页面。
离开网页后改变页面的标题title的特效代码
那么如何使用呢?
用原生 JavaScript 实现,很简单:
方法很简单,只需要将下面代码加入页面即可:
view plaincopy to clipboard

<script>
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
normal_title = document.title;
document.title = '这么着急就走啦,也不再逛逛?';
} else document.title = normal_title;
});
</script>

使用效果就是,如果网站访客切换出当前页面,那么当前的网页就修改标题为"这么着急就走啦,也不再逛逛?"

给出一个实例Demo大家可以参考一下

<!DOCTYPE html>
<html>
<head>
<title>Demo: 离开网页时修改标题</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<html>
<body>
<h1>Demo: 离开页面时修改网页的标题</h1>
<div>
<p>测试方法:不要关闭这个页面;</p>
<p>将浏览器标签切换到任意其他页面;</p>
<p>注意到浏览器标签名称的变化了吗?</p>
</div>
</body>
</html>
<script src="index.js"></script>
</body>
</html>

其中的js文件如下:

var a = document.title;
window.onblur = function() {
document.title = "??Baby come back! Any kind of fool could see... ??";
}, window.onfocus = function() {
document.title = a;
};

以上就是徐伟轩博客为大家整理分析的关于访客切换其他网页时候,自动修改网页标题的相关网页特效代码及使用方法,希望会对大家有所帮助。

如果您喜欢这篇文章,欢迎在下方留言评论哦~
发表您的看法
选择表情