直接通过 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} - 已提交`;

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

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

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• HTML 中放一个按钮：<button id="markRead">标记为已读</button>
• JS 中监听并修改：

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

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

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

立即学习“Java免费学习笔记（深入）”；

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

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

注意事项和兼容性

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

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