当前位置：首页 > JavaScript

js实现title

2026-04-06 17:06:56JavaScript

使用JavaScript修改页面标题

通过document.title属性可以动态修改网页的标题，适用于单页应用或需要实时更新标题的场景。

// 直接修改标题内容
document.title = "新标题";

// 结合变量动态设置标题
const pageName = "仪表盘";
document.title = `${pageName} - 我的网站`;

监听标题变化

通过MutationObserver可以监听标题的变化并执行相应操作。

js实现title

const observer = new MutationObserver(function(mutations) {
    console.log("标题已更改为:", document.title);
});

observer.observe(document.querySelector('title'), {
    childList: true
});

浏览器标签页可见性切换

结合document.hidden和visibilitychange事件，可以在用户切换标签页时动态修改标题。

js实现title

document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = "请回到页面";
    } else {
        document.title = "欢迎回来";
    }
});

闪烁标题效果

通过定时器实现标题闪烁效果，常用于通知提醒。

let originalTitle = document.title;
let isBlinking = false;

function blinkTitle(newText, interval) {
    if (isBlinking) return;

    isBlinking = true;
    let visible = true;
    const blinkInterval = setInterval(() => {
        document.title = visible ? newText : originalTitle;
        visible = !visible;
    }, interval);

    // 停止闪烁的函数
    return function() {
        clearInterval(blinkInterval);
        document.title = originalTitle;
        isBlinking = false;
    };
}

// 使用示例
const stopBlinking = blinkTitle("新消息!", 1000);
// 调用stopBlinking()停止闪烁