如何使用JavaScript在页面加载时获取meta标签的内容？

Question

我希望能够获取YouTube的标签内容。然而，当我导航到新页面时，即使页面源代码已经更新，仍会返回旧页面的内容。

请注意，我关注的是YouTube的频道页面，它们作为单页应用程序运行。

复现步骤：

1. 访问https://www.youtube.com/channel/UCBVjMGOIkavEAhyqpxJ73Dw（Maroon 5的频道）
2. 在控制台中运行document.head.querySelector('meta[name="title"]')；返回<meta name="title" content="Maroon 5">
3. 在右侧边栏下方点击“相关频道”中的链接；例如，https://www.youtube.com/user/EdSheeran
4. 再次在控制台中运行document.head.querySelector('meta[name="title"]')；仍然返回<meta name="title" content="Maroon 5">

查看新页面源代码，发现 meta 标签已更新为 <meta name="title" content="Ed Sheeran">。我还注意到在控制台中运行 document.head.querySelector('title') 返回了更新的 <title>Ed Sheeran - YouTube</title> 元素。

为什么 querySelector 调用仍然返回先前页面的元数据？

- Graham Swan

---

您可以尝试使用 "document.title" 命令。 - Volkan Yılmaz

@VolkanYılmaz 那对于页面标题是有效的，但我特别需要<meta name="title">元素。 - Graham Swan

访问view-source:https://www.youtube.com/channel/UCBVjMGOIkavEAhyqpxJ73Dw并搜索<title>标签，您可以看到它不在meta部分中。我认为当访问YouTube页面时，“<meta name =“ title”>”元素不会更改。 - Volkan Yılmaz

不仅标题，所有元标签都已过时。更新它们可能是毫无意义的。它们用于向搜索引擎描述页面，例如Ed Sheran也将从引擎角度获得正确的描述。 - Adelin

为什么使用这样的查询选择器？YouTube 有用于编程的 API。 - Adelin

@VolkanYılmaz @Adelin 啊，你说得对！<title>元素已经更新了，但是在点击到新频道后，<meta ...>元素已经过时了。感谢你指出这一点。 :) - Graham Swan

Answer 1

为什么querySelector调用仍然返回上一页的元数据？

因为：我正在关注YouTube的频道页面，它们作为单页应用程序。可能是编写SPA代码的人在更新其余DOM时没有更新元数据。

从服务器请求页面的新副本以查看源代码会获取正确的元数据，因为它是由服务器端代码而不是SPA代码生成的。

- Quentin

---

谢谢您指出这一点。我感到困惑，因为页面标题和内容已经更新，但是在点击到新频道后，<meta ...>元素仍然过时。检测并获取当前页面源代码解决了这个问题。 - Graham Swan