How to get content from another website using JavaScript

Here’s the scenario:

One of my websites is static, and I need to maintain a changelog both on the website and on GitHub Pages. The solution is a simple JavaScript function to parse the Markdown content and display it on my website.

The content on GitHub Pages is rendered as HTML (from Markdown), so for my changelog I have headings – ⁣h2⁣ – and lists – ⁣ul/li. Also, I need to get the <body> content only.

So I’ll use the DOMParser() class, like below.

Note that I am checking for a specific element – ⁣.changelog⁣ – on my static website, so I can replace it with the retrieved changelog.

document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('.changelog')) {
        function file_get_contents(filename) {
            fetch(filename).then((resp) => resp.text()).then(data => {
                // Optional, replace the H1 heading with nothing,
                // as I do not need it on my static website
                data = data.replace(/<h1>(.*?)<\/h1>/ig, "");

                // Initialize the document parser
                const parser = new DOMParser();
                let doc = parser.parseFromString(data, 'text/html');

                // Get the <body> element content
                let body = doc.querySelector('body').innerHTML;

                // Replace my empty element with the retrieved content
                document.querySelector('.changelog').innerHTML = body;
            });
        }

        // Call the function and point it to my GitHub Pages page
        file_get_contents('https://mypage.github.io/path/to/changelog');
    }
});

The function above is commented and self-explanatory. I did not encounter any restriction or CORS issue.

I assume that the github.io domain has no restrictions, due to the way it’s built, and this makes it ideal for these kinds of tasks.

I also assume that one could create a crude, basic CMS based on github.io and a static website. I wouldn’t recommend it, though.

While fetching content from another website using JavaScript can be a practical way to aggregate and utilize data, it’s just the beginning. To truly derive value from this data, proper tagging and classification are crucial. If you’re struggling with managing and organizing this information, our data tagging service can provide you with a robust and efficient solution. Our team of experts can ensure that your data is well-organized, allowing you to harness its full potential effectively.