直接通过 document.title 修改即可实现动态网页标题效果，这是BOM中最常用、最直接且兼容性最好的方法，支持读取、设置、变量拼接及结合交互与可见性API使用，IE8+全支持。

直接通过 document.title 修改即可实现动态网页标题效果，BOM 中最常用、最直接的方式就是操作这个属性。

用 document.title 实时更新标题

这是最标准、兼容性最好的方法，不需要调用 window 对象的其他 BOM 方法，因为 document.title 本身就是 BOM（浏览器对象模型）与 DOM 交界处的核心属性之一。

• 读取当前标题：console.log(document.title);
• 设置新标题：document.title = "新页面标题";
• 支持变量拼接，例如：document.title = `订单 #${orderId} - 已提交`;

结合用户交互触发标题变化

常见于表单提交、页面状态切换或通知提醒场景。例如用户点击按钮后更新标题：

Java Development Man

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。

下载

• HTML 中放一个按钮：标记为已读
• JS 中监听并修改：

  document.getElementById("markRead").onclick = () => {
    document.title = "✅ 已读 - " + document.title;
  };

配合页面可见性 API 做“离开时提醒”效果

利用 document.hidden 和 visibilitychange 事件，在用户切走标签页时临时修改标题，返回时恢复：

• 保存原始标题：const originalTitle = document.title;
• 监听可见性变化：

  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      document.title = "⚠️ 切换回来了？";
    } else {
      document.title = originalTitle;
    }
  });

注意事项和兼容性

document.title 在所有现代浏览器中都完全支持（包括 IE8+），无需额外 polyfill。

• 标题内容会自动 HTML 转义，写入 <script></script> 不会执行，安全可靠
• 不建议频繁高频修改（如每秒多次），可能影响可访问性或浏览器标签刷新表现
• 移动端 Safari 对标题过长会截断，建议控制在 20–30 字以内

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南