如何利用 JavaScript 动态设置文档标题-js教程-PHP中文网

最直接有效的方式是使用 document.title 属性赋值；它能立即更新浏览器标签页标题，支持基础设置、路由自动切换、响应式更新及动态效果（如滚动、打字），兼容所有现代浏览器。

如何利用 javascript 动态设置文档标题

最直接有效的方式是使用 document.title 属性赋值，它能立即更新浏览器标签页上显示的标题，无需操作 DOM 中的 <title></title> 元素本身。

基础设置：一句话搞定

只要在 JavaScript 中执行：

document.title = "欢迎来到首页";
document.title = "用户详情 - 张三";
document.title = `订单 #${orderId} - 已支付`;

浏览器标签页标题就会实时刷新。这是标准、轻量、兼容所有现代浏览器（包括微信内置浏览器）的核心方法。

按路由自动切换标题（Vue/React 常用）

单页应用中，不同页面应有不同标题。推荐在路由守卫中统一处理：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

Vue Router 示例：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || '默认标题';
  next();
});

对应路由配置需带 meta 标题信息：

{
  path: '/user/:id',
  component: UserView,
  meta: { title: '用户档案' }
}

这样每次跳转都会自动更新标题，无需每个组件重复写逻辑。

响应式标题：随状态变化实时更新

适合通知类、实时数据类场景，比如未读消息数、表单状态、滚动进度：

消息提醒（带角标）：document.title = unread > 0 ? `(${unread})我的网站` : '我的网站';`
表单修改未保存提示：if (isDirty) document.title = '⚠️ ' + originalTitle;
滚动百分比提示：window.addEventListener('scroll', () => { const p = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100); document.title = `已滚动 ${p}%`; });

动态效果标题（滚动/打字/闪烁）

用于吸引注意或营造氛围，但建议慎用，避免干扰用户：

简单滚动效果：

let title = document.title;
let pos = 0;
function roll() {
  document.title = title.slice(pos) + title.slice(0, pos);
  pos = (pos + 1) % title.length;
  setTimeout(roll, 400);
}
roll();

打字机效果（适合欢迎语）：

const text = '加载中...';
let i = 0;
function type() {
  document.title = text.slice(0, ++i);
  if (i

注意：这类效果建议只在特定页面启用，并提供关闭机制（如离开页面时恢复原标题）。

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