如何用JavaScript实现浏览器标签页闪烁提示效果

在即时通讯、后台任务提醒等场景中，浏览器标签页闪烁提示是非常实用的功能，能让用户即使没有聚焦当前页面也能及时收到提醒。下面我们就来介绍几种基于JavaScript的实现方案。

基础方案：修改标签页标题实现闪烁

最基础的闪烁提示是通过定时修改document.title的值，让标题在原始内容和提示内容之间切换，用户看到标签页标题不断变化就会注意到提醒。

实现思路很简单，先保存原始的标签页标题，然后用setInterval定时器每隔一段时间切换标题，当需要停止闪烁时清除定时器，恢复原始标题即可。

// 保存原始标题
const originalTitle = document.title;
// 定义提示标题
const tipTitle = "【新消息】";
// 定时器标识
let blinkTimer = null;

// 开始闪烁
function startBlink() {
  // 避免重复开启定时器
  if (blinkTimer) return;
  let isShowTip = false;
  blinkTimer = setInterval(() => {
    if (isShowTip) {
      document.title = originalTitle;
    } else {
      document.title = tipTitle + originalTitle;
    }
    isShowTip = !isShowTip;
  }, 1000); // 每1秒切换一次
}

// 停止闪烁
function stopBlink() {
  if (blinkTimer) {
    clearInterval(blinkTimer);
    blinkTimer = null;
    // 恢复原始标题
    document.title = originalTitle;
  }
}

进阶方案：结合系统通知增强提醒

如果仅修改标题不够明显，还可以结合Notification API发送系统级的桌面通知，同时配合标题闪烁，提醒效果会更好。不过使用Notification API需要先获取用户的授权。

首先我们需要检查浏览器是否支持Notification，然后请求用户授权，授权通过后再发送通知，同时启动标题闪烁。

// 检查是否支持Notification
if ("Notification" in window) {
  // 请求授权
  Notification.requestPermission().then((permission) => {
    if (permission === "granted") {
      // 授权通过，发送通知并启动闪烁
      sendNotificationAndBlink();
    }
  });
}

function sendNotificationAndBlink() {
  // 发送桌面通知
  const notification = new Notification("新消息提醒", {
    body: "您有一条新的消息，请查看",
    icon: "https://picsum.photos/100/100?random=2"
  });
  // 点击通知时聚焦页面，停止闪烁
  notification.onclick = () => {
    window.focus();
    stopBlink();
    notification.close();
  };
  // 启动标题闪烁
  startBlink();
}

兼容性处理与注意事项

在实际使用中需要注意几个问题，首先是Notification API的兼容性，部分旧版本浏览器可能不支持，使用时一定要先做支持性检查。其次是用户授权问题，如果用户拒绝了通知授权，就不能发送桌面通知，此时可以只保留标题闪烁的效果。

另外，当页面重新获得焦点时，应该自动停止闪烁，避免不必要的标题切换影响用户体验，我们可以监听visibilitychange事件或者focus事件来处理。

// 监听页面可见性变化
document.addEventListener("visibilitychange", () => {
  // 如果页面变为可见状态，停止闪烁
  if (!document.hidden) {
    stopBlink();
  }
});

// 也可以监听窗口聚焦事件
window.addEventListener("focus", () => {
  stopBlink();
});

方案对比

不同的实现方案适用场景不同，我们可以通过下面的表格来对比：

以上就是用JavaScript实现浏览器标签页闪烁提示的几种常用方案，开发者可以根据项目的实际需求选择合适的实现方式，调整闪烁的间隔、提示内容等参数，达到最好的提醒效果。

JavaScript标签页闪烁Notification_APIdocument_title定时器修改时间：2026-05-29 17:28:48