如何通过 JavaScript 为动态添加的 '<link>' 标签启用 RSS 提要自动检测



大多数单页应用程序(SPA(只提供最小的静态HTML框架,然后动态构建整个页面。这也适用于HTML标头<head>中的标记。

今天,我遇到了一个动态添加RSS提要的问题。客户端脚本的关键部分看起来像

// During SPA initialization routine
const head = document.querySelector('head');
config.rss_feeds.forEach(function (feed){
const link = document.createElement('link');
link.rel = "alternate";
link.type = feed.mimetype;
link.href = feed.url;
link.title = feed.title;
head.appendChild(link);
});

不要担心config对象是什么。这个对象是由后端通过以前的AJAX请求提供给SPA的,包含SPA的所有必要配置。但它是相当直接的。SPA为每个RSS提要创建一个<link>元素,并将其附加到<head>

当我查看我的开发人员面板并检查HTMLDOM时,<link>标记就会按预期存在。然而,RSS阅读器似乎不会自动检测到提要。我主要尝试使用Firefox和各种插件,但结果总是负面的。

我想,RSS插件只在加载后立即分析HTML页面onyce,但不考虑Javascript引起的任何更改。

如何通过JavaScript为动态添加的<link>标签启用RSS提要自动检测

优选地,解决方案应该跨客户端工作,即在Firefox、Chrome、Edge、Safari等中;重新扫描标题";?

我猜,RSS插件只在加载后立即分析HTML页面,但不考虑Javascript引起的任何更改。

一般来说,是的。

如何通过JavaScript为动态添加的标签启用RSS提要自动检测?

你不能。他们只看HTML。你没有办法在每个人使用的所有RSS软件中添加JavaScript支持。


您需要生成的不仅仅是骨架HTML。这通常被称为预呈现,通常采取两种形式之一:

  • 在构建时生成静态HTML页面
  • 使用服务器端呈现生成HTML

像Next.js这样的框架往往带有内置的功能。

如果你有一个RSS提要,那么你可能想看看服务器端的渲染(因为有RSS意味着你的内容经常更新(。

最新更新