为博客增加点乐趣：用 JS 改变网页标题

最近做了一段非常有 cool 的 JavaScript 代码，我在自己的博客里试了一下，效果非常棒欸！
如果你的博客支持自定义 JS，也可以尝试，让页面更生动有趣。

它能做什么？

当用户切换到其他标签页或者最小化浏览器时，标题会自动变成 “别走太远了啊喂...” 来 “挽留” 用户；而当用户回到页面时，标题会热情地显示 “好耶，回来啦！ヾ (・ω・`) o”，两秒后还会自动恢复到原来的标题。

是不是很酷？上代码！

代码实现

Copy
// 定义原始标题
const originalTitle = document.title;
let timeoutId; // 用于存储延时器 ID

// 监听页面的可见性变化
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// 当页面不可见时更改标题
document.title = "别走太远了啊喂...";
// 清除可能存在的延时器
clearTimeout(timeoutId);
} else {
// 当页面可见时，延迟 2 秒更改标题
document.title = "好耶，回来啦！ヾ (•ω•`)o";
// 再过 2 秒恢复到原始标题
timeoutId = setTimeout(() => {
document.title = originalTitle;
}, 2000);
}
});

技术拆解

1. document.title

这是一个简单又强大的属性，可以用来读取或者更改网页标签上的标题内容。我们通过动态赋值，让标题 “活起来”。

2. document.hidden

这个属性来自浏览器的 Visibility API，用来检测页面是否处于不可见状态。当用户切换标签页或者最小化浏览器时，它会变为 true；当用户重新回来时，它又会变回 false。

3. visibilitychange 事件

这是页面可见性变化时触发的事件，非常适合我们实现这种 “侦测用户行为” 的功能。

4. setTimeout 和 clearTimeout

setTimeout 让我们可以在用户回来时延迟几秒执行标题恢复操作，这样显得更加自然。

clearTimeout 则用来确保不会有多余的延时操作积压，避免逻辑冲突。

特点与不足

优点：

实现逻辑简单，代码直观。

直接通过全局变量管理状态，快速完成功能。

不足：

使用了全局变量 originalTitle 和 timeoutId，可能与其他代码冲突。

没有清理事件监听器，可能导致页面卸载时出现潜在的内存泄漏。

改进版：来自评论区 liuzhen932 的建议

liuzhen932 提出了一个更加模块化的版本，将代码封装在立即执行函数中，同时添加了事件清理机制。以下是改进后的代码：

Copy
(function () {
"use strict";

// 保存原始标题，用于后续恢复
const originalTitle = document.title;

// 存储定时器 ID，防止多个定时器冲突
let timeoutId;

// 处理页面可见性变化的逻辑
function handleVisibilityChange() {
// 清除上一次可能存在的延时器
clearTimeout(timeoutId);

if (document.hidden) {
// 当页面不可见时，设置标题
document.title = "别走太远了啊喂...";
} else {
// 当页面可见时，先设置一个提示标题
document.title = "好耶，回来啦！ヾ(•ω•`)o";
// 延时 2 秒后恢复原始标题
timeoutId = setTimeout(() => {
document.title = originalTitle;
}, 2000);
}
}

// 页面即将卸载时的清理逻辑
function beforeUnloadListener() {
// 移除可见性变化的事件监听器，避免内存泄漏
document.removeEventListener("visibilitychange", handleVisibilityChange);
}

// 绑定页面可见性变化的事件
document.addEventListener("visibilitychange", handleVisibilityChange);

// 在页面卸载之前移除相关事件监听器
window.addEventListener("beforeunload", beforeUnloadListener);
})();

改进点

模块化设计：

使用立即执行函数，避免全局变量污染。

事件清理：

在页面卸载时移除了 visibilitychange 监听器，减少内存泄漏风险。

简洁性：

使用三元运算符和逻辑短路写法，使代码更加紧凑。

实际用在哪里？

我也不知道，很有趣就对了，这可以是你的博客的彩蛋，也可以是提醒什么的吧，看你用处在哪了！

small 贴士

适度使用：标题频繁变化可能会让人觉得烦的很，要控制好触发频率啊。

兼容性问题：虽然说现代浏览器几乎都支持 Visibility API，但如果你的用户群体使用旧版浏览器，还是做好兼容性处理最好。

像这样的代码我以后还会继续分享，大家拿去随便发挥，如果可以把博客留在评论区我去观赏一下也不是不行（

此文由 Mix Space 同步更新至 xLog
原始链接为 https://ling.crashvibe.cn/posts/default/fun-with-js-dynamic-title