直接赋值 document.title 是最简单有效的网页标题动态更新方式，适用于表单提示、未读数显示、SPA 路由切换等场景，需绑定用户事件驱动，并注意移动端缓存、长度限制及 SEO 兼容性。
用 document.title 直接赋值是最简单有效的方式
网页标题不是只在 <head> 里写死的，运行时随时能改。核心就是操作 document.title 这个可读写属性——它本质上就是当前页面 <title> 标签的文本内容。
常见场景包括：表单未保存时加「*」提示、聊天页显示未读数、单页应用（SPA）路由切换时更新标题。只要 JS 能执行，就能改：
document.title = "订单已提交 - 我的电商";
注意：document.title 只接受字符串，传数字或对象会自动转成字符串（比如 document.title = 42 会变成 "42"），但别依赖这种隐式转换，显式 String() 或模板字符串更稳妥。
监听用户操作并触发标题更新
标题变化必须由用户动作驱动，比如点击按钮、输入内容、切换标签页。不能只写赋值语句就完事，得把它“挂”到具体事件上。
立即学习“前端免费学习笔记（深入）”；
典型做法是绑定事件监听器，例如：
- 表单输入时实时反映内容：
input或blur事件中读取input.value并拼入标题 - 导航菜单点击后：
click回调里根据目标页信息设置新标题 - 监听
visibilitychange事件，在用户切回页面时恢复原标题（避免被其他逻辑覆盖）
示例：用户在搜索框输入「React」，标题立刻变成「搜索 “React” - 我的网站」
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", () => {
const q = searchInput.value.trim();
document.title = q ? `搜索 "${q}" - 我的网站` : "我的网站";
});单页应用（SPA）中路由变化时更新标题
Vue Router、React Router 等框架通常自带标题管理机制，但底层仍靠 document.title。手动实现时，关键在于捕获路由变更信号。
原生 History API 场景下，监听 popstate 事件；Hash 模式则监听 hashchange。每次变化后，从当前 URL 解析出页面标识，再查表或计算出对应标题：
window.addEventListener("popstate", () => {
const path = location.pathname;
const titleMap = {
"/": "首页",
"/about": "关于",
"/contact": "联系我"
};
document.title = titleMap[path] || "默认标题";
});注意：如果使用了服务端渲染（SSR）或静态生成（如 Next.js、Nuxt），首次加载标题由 HTML 决定，JS 修改只是后续行为，SEO 不受影响；但纯前端 SPA 必须确保首屏标题也通过 JS 正确设置，否则搜索引擎可能抓取到空标题或旧标题。
容易忽略的细节和兼容性问题
看似简单，但几个点常导致失效或体验异常：
- 移动端浏览器（尤其是 iOS Safari）有时会缓存标题，切后台再切回来可能不刷新——可在
visibilitychange中强制重设一次 - 某些浏览器对标题长度有限制（一般 50–100 字符），超长会被截断，建议提前
slice(0, 60)控制长度 - 如果页面用了 PWA，
manifest.json中的name或short_name是安装后桌面图标显示的名称，和document.title无关，别混淆 - 在 iframe 里修改父页面标题会失败（跨域限制），
parent.document.title抛DOMException，需加try/catch
最常被跳过的一步：改完标题后没同步更新页面内可见的 <h1> 或面包屑，造成视觉与标签栏不一致。动态标题不是孤立动作，要和 UI 状态保持联动。
