在即时通讯、后台任务监控等场景中，当用户切换到其他标签页时，通过当前标签页标题闪烁、图标变化来提醒用户关注新消息是非常常见的需求。本文将介绍如何用原生JavaScript实现浏览器标签页闪烁提醒效果。
实现核心原理
要实现标签页闪烁提醒，需要解决两个核心问题：一是判断用户是否离开了当前标签页，二是动态修改标签页的标题实现闪烁效果。
第一个问题可以通过Page Visibility API解决，这个API提供了document.visibilityState属性，用来获取当前页面的可见状态，还提供了visibilitychange事件，当用户切换标签页、最小化浏览器时会触发这个事件。
第二个问题可以通过定时器周期性修改document.title实现，交替显示原始标题和提醒标题就能形成闪烁效果。
基础实现步骤
1. 定义基础变量
首先需要定义存储原始标题、提醒标题、定时器标识的变量，方便后续控制闪烁的启停。
// 存储原始标签页标题 let originalTitle = document.title; // 提醒时显示的标题 let remindTitle = '【新消息】'; // 定时器标识，用来控制闪烁启停 let blinkTimer = null; // 闪烁状态标记，避免重复启动定时器 let isBlinking = false;
2. 监听标签页可见性变化
通过监听visibilitychange事件，当用户离开当前标签页（页面不可见）时启动闪烁，当用户回到当前标签页时停止闪烁并恢复原始标题。
// 监听页面可见性变化事件
document.addEventListener('visibilitychange', function() {
// 判断页面是否不可见
if (document.visibilityState === 'hidden') {
// 页面隐藏时启动闪烁
startBlink();
} else {
// 页面显示时停止闪烁，恢复原始标题
stopBlink();
}
});3. 实现闪烁启停函数
启动闪烁时，用setInterval定时器每隔一段时间切换标题；停止闪烁时，清除定时器，将标题恢复为原始值。
// 启动闪烁函数
function startBlink() {
// 如果已经在闪烁，直接返回避免重复启动
if (isBlinking) return;
isBlinking = true;
// 每500毫秒切换一次标题
blinkTimer = setInterval(function() {
// 判断当前标题是否为原始标题，是则切换为提醒标题，否则切回原始标题
if (document.title === originalTitle) {
document.title = remindTitle;
} else {
document.title = originalTitle;
}
}, 500);
}
// 停止闪烁函数
function stopBlink() {
// 清除定时器
clearInterval(blinkTimer);
blinkTimer = null;
isBlinking = false;
// 恢复原始标题
document.title = originalTitle;
}扩展：手动控制闪烁
除了根据页面可见性自动启停，我们也可以提供手动控制的方法，比如在收到新消息时主动触发闪烁，用户点击页面后停止闪烁。
// 模拟收到新消息时手动触发闪烁
function onReceiveNewMessage() {
// 如果当前页面已经可见，不需要闪烁
if (document.visibilityState === 'visible') return;
startBlink();
}
// 监听页面点击事件，用户点击页面时停止闪烁
document.addEventListener('click', function() {
stopBlink();
});注意事项
- 闪烁间隔建议设置在300-1000毫秒之间，间隔太短会造成视觉疲劳，太长则提醒效果不明显。
- 一定要做好闪烁状态的标记，避免重复启动定时器导致标题切换混乱。
- 页面卸载时建议主动清除定时器，避免内存泄漏，可以监听
beforeunload事件处理。 - 部分浏览器可能会对频繁修改标题有限制，实际使用时可以调整闪烁策略，比如只闪烁几次后停止。
完整示例代码
以下是可直接运行的完整示例，复制到HTML文件中即可测试效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标签页闪烁提醒示例</title>
</head>
<body>
<h3>测试标签页闪烁提醒</h3>
<p>切换到其他标签页，等待1秒后会看到当前标签页标题开始闪烁</p>
<button onclick="simulateNewMessage()">模拟收到新消息</button>
<script>
let originalTitle = document.title;
let remindTitle = '【新消息】';
let blinkTimer = null;
let isBlinking = false;
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
startBlink();
} else {
stopBlink();
}
});
function startBlink() {
if (isBlinking) return;
isBlinking = true;
blinkTimer = setInterval(function() {
if (document.title === originalTitle) {
document.title = remindTitle;
} else {
document.title = originalTitle;
}
}, 500);
}
function stopBlink() {
clearInterval(blinkTimer);
blinkTimer = null;
isBlinking = false;
document.title = originalTitle;
}
function simulateNewMessage() {
if (document.visibilityState === 'visible') {
alert('当前页面可见，无需闪烁提醒');
return;
}
startBlink();
}
window.addEventListener('beforeunload', function() {
stopBlink();
});
</script>
</body>
</html>
JavaScript浏览器标签页闪烁提醒Page_Visibility_APItitle动态修改修改时间：2026-05-29 17:48:03