设计/编程/开发

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

徐伟轩博主

2020-07-23 16:04

0 评论

920 阅读

387 字

07月23

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

这种效果怎么实现的呢？
其实根据浏览器标签页的切换来改变标签页的title看到一个很有意思的HTML5事件，visibilitychange事件在当前网页在可见和不可见之间变换的时候调用，比如用户切换到其他页面。

那么如何使用呢？
用原生 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;
};

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

网页特效代码网页代码