如何在HTML代码执行后期设置页面<title>标签内容？

嘿，这个问题在动态内容渲染的场景里太常见了！我给你几个实用的解决思路，按需选就行：

这是最直接的前端方案——哪怕<head>已经输出到页面了，浏览器允许我们随时通过JS修改页面标题。

等你获取到文章标题后，只需要一行代码就能搞定：

// 假设你从文章内容里提取到了标题，存在articleTitle变量中
document.title = articleTitle;

如果你的文章是异步加载的（比如通过接口获取），就把这段代码放在异步请求的回调里，等文章内容渲染完成后执行，浏览器会实时更新标签栏的标题。

如果是在服务器端生成HTML（比如用Node.js、PHP这类后端语言），那完全可以先处理文章内容、拿到标题，再生成<head>部分，从根源上解决顺序问题。

举个Node.js + EJS模板引擎的例子：

// 服务器端代码
app.get('/article', (req, res) => {
  // 第一步：先从数据库/文件里获取文章数据，拿到标题
  const article = getArticleFromDataSource();
  const articleTitle = article.title;
  
  // 第二步：把标题和文章内容传给模板，再渲染输出HTML
  res.render('article-page', { pageTitle: articleTitle, articleContent: article.content });
});

对应的EJS模板：

<html>
<head>
  <title><%= pageTitle %></title>
</head>
<body>
  <article><%= articleContent %></article>
</body>
</html>

这样生成的HTML里，<title>一开始就是正确的文章标题，不需要后续修改。

如果是前端模板渲染，你可以先给<title>加个占位符，等文章加载完成后再替换内容：

<html>
<head>
  <title id="page-title">文章加载中...</title>
</head>
<body>
  <article id="article-container"></article>
  
  <script>
    // 模拟从接口获取文章数据
    fetch('/api/get-article')
      .then(res => res.json())
      .then(article => {
        // 先渲染文章内容
        document.getElementById('article-container').innerHTML = article.content;
        // 再替换标题
        document.getElementById('page-title').textContent = article.title;
      });
  </script>
</body>
</html>

本质上和第一种JS修改的思路一致，只是通过直接操作<title>元素的文本内容来实现，效果完全相同。

内容的提问来源于stack exchange，提问作者M-A-X