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

在网页开发中，当我们需要提醒用户有新的消息或者重要的待处理事项时，让浏览器标签页产生闪烁效果是一种很直观的提示方式。下面我们就一步步讲解如何用纯JavaScript实现这个功能。

实现核心思路

要实现标签页闪烁，主要需要解决两个问题：一是知道当前页面是否处于可见状态，避免用户正在查看页面时还无意义地闪烁；二是能够动态修改标签页的标题和图标，通过交替切换内容形成闪烁的视觉效果。

监听页面可见性状态

我们可以使用Page Visibility API来监听页面的可见性变化，这个API提供了document.visibilityState属性来判断页面当前的状态，也提供了visibilitychange事件来监听状态变化。

常见的visibilityState值有两个：visible表示页面当前处于可见状态，hidden表示页面被最小化或者在后台标签页中。

// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        // 页面变为可见时，停止闪烁
        stopTabFlash();
    } else {
        // 页面变为隐藏时，可以触发闪烁
        // startTabFlash();
    }
});

// 判断当前页面是否隐藏
function isPageHidden() {
    return document.visibilityState === 'hidden';
}

实现标签页标题闪烁

标签页的标题可以通过document.title属性来修改，我们只需要设置一个定时器，交替切换标题内容就可以实现闪烁效果。

let flashTimer = null;
let originalTitle = document.title; // 保存原始标题
let flashTitle = '【新消息】'; // 闪烁时显示的标题前缀

function startTabFlash() {
    // 如果已经在闪烁，先清除之前的定时器
    if (flashTimer) {
        clearInterval(flashTimer);
    }
    let isFlash = false;
    flashTimer = setInterval(function() {
        if (isFlash) {
            document.title = originalTitle;
        } else {
            document.title = flashTitle + originalTitle;
        }
        isFlash = !isFlash;
    }, 1000); // 每秒切换一次
}

function stopTabFlash() {
    if (flashTimer) {
        clearInterval(flashTimer);
        flashTimer = null;
        // 恢复原始标题
        document.title = originalTitle;
    }
}

可选：修改标签页图标实现更醒目的闪烁

除了修改标题，我们还可以同时修改标签页的图标（favicon）来增强闪烁效果。标签页的图标通常是标签，我们可以通过动态修改这个标签的href属性来切换图标。

let originalFavicon = '';
// 获取原始favicon地址
const faviconLink = document.querySelector("link[rel*='icon']");
if (faviconLink) {
    originalFavicon = faviconLink.href;
}

let flashFavicon = 'https://ipipp.com/flash-favicon.ico'; // 闪烁时使用的图标地址
let isFlashFavicon = false;

function switchFavicon() {
    if (!faviconLink) return;
    if (isFlashFavicon) {
        faviconLink.href = originalFavicon;
    } else {
        faviconLink.href = flashFavicon;
    }
    isFlashFavicon = !isFlashFavicon;
}

// 可以把切换favicon的逻辑加入到之前的标题闪烁定时器中

完整使用示例

下面是一个完整的示例，当页面处于后台时自动触发闪烁，当页面回到前台时停止闪烁，同时点击按钮也可以手动触发和停止。

// 保存原始状态
const originalTitle = document.title;
let flashTimer = null;
// 闪烁配置
const flashConfig = {
    interval: 1000, // 闪烁间隔，单位毫秒
    flashTitlePrefix: '【新消息】'
};

// 开始闪烁
function startTabFlash() {
    if (flashTimer) return;
    let isFlash = false;
    flashTimer = setInterval(() => {
        if (isFlash) {
            document.title = originalTitle;
        } else {
            document.title = flashConfig.flashTitlePrefix + originalTitle;
        }
        isFlash = !isFlash;
    }, flashConfig.interval);
}

// 停止闪烁
function stopTabFlash() {
    if (flashTimer) {
        clearInterval(flashTimer);
        flashTimer = null;
        document.title = originalTitle;
    }
}

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
        stopTabFlash();
    }
});

// 模拟收到新消息触发闪烁
function simulateNewMessage() {
    // 如果页面已经在后台，直接开始闪烁
    if (document.visibilityState === 'hidden') {
        startTabFlash();
    } else {
        // 如果页面在前台，可以弹出提示，也可以根据需要触发闪烁
        alert('收到新消息');
    }
}

注意事项

• 闪烁频率不要设置得太高，一般1秒左右切换一次比较合适，过高的频率会让用户感到不适。
• 一定要在页面重新获得焦点时停止闪烁，同时恢复原始的标题和图标，避免影响用户后续使用。
• 如果网站有原始favicon，修改前记得先保存原始地址，停止闪烁时正确恢复。
• 部分浏览器可能会对频繁修改标题或者favicon的行为做一些限制，测试时可以在不同浏览器中验证效果。

JavaScript标签页闪烁浏览器标签页Page_Visibility_API修改时间：2026-05-27 00:30:41