apple-touch-icon@2.png


Most single-page application (SPA) only ship a minimal static HTML skeleton and then build the entire page dynamically. This also applies to tags in the HTML header <head>.

Today, I ran into a problem with dynamically added RSS feeds. The crucial part of the client side script looks like

// 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);
});

Don’t bother yourself what the config object is. This one is provided by the backend to the SPA via a previous AJAX request and contains all the necessary configuration of the SPA. But it is pretty straight forward. The SPA creates a <link> element for each RSS feed and appends it to <head>.

When I look into my developer panel and inspect the HTML DOM, then the <link> tag exists as expected. However, RSS readers do not seem to detect the feed automatically. I mostly tried with Firefox and various plugins, but it the result is always negative.

I guess, the RSS plugins only analyze the HTML page onyce immediately after is has been loaded, but do not consider any changes due to Javascript.

How do I enable RSS feed autodetection for dynamically added <link> tags via JavaScript?

Preferably, a solution should work cross-client, i.e. in Firefox, Chrome, Edge, Safari, etc. Is there any JS method like “re-scan header”?



Source link

By Ajay Kumar Verma

techopenion is the one stop solution of all your information needs. Get everything from latest tech updates to latest gadgets in technology.

Leave a Reply

Your email address will not be published. Required fields are marked *