javascript - 如何使用 JavaScript 跨页面加载获取元标记的内容？

Question

我想获取一个meta的内容YouTube 上的标签。但是，当我导航到新页面时，即使页面源已更新，旧页面的内容仍然返回。

请注意，我关注的是 YouTube 的 channel 页面，它充当单页面应用程序。

重现:

1. 访问https://www.youtube.com/channel/UCBVjMGOIkavEAhyqpxJ73Dw (Maroon 5 channel )
2. 运行 document.head.querySelector('meta[name="title"]')在控制台中；返回 <meta name="title" content="Maroon 5">
3. 点击右侧边栏“相关 channel ”下的链接；例如，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调用仍然返回上一页的元数据？

Answer 1

Why does the querySelector call still return metadata from the previous page?

因为:我专注于 YouTube 的 channel 页面，它充当单页面应用。

据推测，负责编写 SPA 代码的人在使用 JS 更新 DOM 的其余部分时并没有更新元数据。

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