如何使用JavaScript实现浏览器标签页闪烁通知效果

在很多即时通讯、任务提醒类Web应用中，当用户没有停留在当前页面时，通过浏览器标签页闪烁的方式提醒用户新消息，是非常实用的功能。下面就来详细介绍如何用JavaScript实现这个效果。

实现核心原理

要实现标签页闪烁通知，核心需要解决两个问题：一是修改浏览器标签页的标题内容，二是判断用户当前是否正在查看当前页面。修改标题只需要操作document.title属性即可，而判断页面是否可见可以使用Page Visibility API，这个API提供了document.hidden属性和visibilitychange事件，能准确获取页面当前的可见状态。

基础实现步骤

1. 判断页面是否可见

首先通过Page Visibility API检测用户是否在当前页面，只有用户不在当前页面时才触发闪烁效果，避免打扰正在使用页面的用户。

// 判断页面是否隐藏
function isPageHidden() {
    return document.hidden || document.webkitHidden || document.mozHidden || document.msHidden;
}

2. 实现标题闪烁逻辑

通过定时器交替修改标签页标题，实现闪烁效果，同时保留原始标题，方便停止闪烁时恢复。

let originalTitle = document.title; // 保存原始标题
let blinkTimer = null; // 闪烁定时器
let blinkMessages = ['【新消息】', '【待处理】']; // 闪烁显示的提示文本
let blinkIndex = 0; // 当前闪烁文本索引

// 开始闪烁
function startBlink() {
    // 如果已经在闪烁，先清除之前的定时器
    if (blinkTimer) {
        clearInterval(blinkTimer);
    }
    blinkTimer = setInterval(() => {
        // 交替显示提示文本和原始标题
        if (blinkIndex % 2 === 0) {
            document.title = blinkMessages[Math.floor(blinkIndex / 2) % blinkMessages.length] + originalTitle;
        } else {
            document.title = originalTitle;
        }
        blinkIndex++;
    }, 1000); // 每秒切换一次
}

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

3. 结合页面可见性触发效果

监听页面可见性变化事件，当用户离开页面时启动闪烁，回到页面时停止闪烁。

// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
    if (isPageHidden()) {
        // 页面隐藏，开始闪烁
        startBlink();
    } else {
        // 页面显示，停止闪烁
        stopBlink();
    }
});

// 兼容不同浏览器的前缀写法
['webkitvisibilitychange', 'mozvisibilitychange', 'msvisibilitychange'].forEach(event => {
    document.addEventListener(event, function() {
        if (isPageHidden()) {
            startBlink();
        } else {
            stopBlink();
        }
    });
});

完整使用示例

下面是一个模拟收到新消息触发闪烁的完整示例，点击按钮模拟收到新消息，当用户离开页面时自动开始闪烁。

// 模拟收到新消息的函数
function receiveNewMessage() {
    // 保存当前标题（如果已经在闪烁，先取原始标题）
    if (!originalTitle) {
        originalTitle = document.title;
    }
    // 如果用户当前不在页面，直接启动闪烁
    if (isPageHidden()) {
        startBlink();
    } else {
        // 用户在当前页面，也可以弹出提示（可选）
        alert('收到新消息');
    }
}

// 绑定模拟按钮事件（假设页面有一个id为newMsgBtn的按钮）
document.getElementById('newMsgBtn')?.addEventListener('click', receiveNewMessage);

注意事项

• 不同浏览器对Page Visibility API的前缀支持不同，上面的代码已经做了兼容处理，基本覆盖主流浏览器。
• 闪烁间隔建议设置在800-1500毫秒之间，过短会让用户觉得刺眼，过长则可能错过提醒。
• 停止闪烁时一定要恢复原始标题，避免用户回到页面后标题还是修改后的内容。
• 如果用户手动关闭了页面，定时器会自动清除，不需要额外处理页面卸载的逻辑。

兼容性说明

下面是目前主流浏览器对Page Visibility API的支持情况：

如果需要支持更老版本的浏览器，可以在代码中添加降级判断，当API不可用时，改用window的blur和focus事件来判断页面是否活跃，不过这种方式准确率不如Page Visibility API。

JavaScript浏览器标签页闪烁通知效果Page_Visibility_API修改时间：2026-05-27 00:50:52