Extracting data from a web page and inserting into html code of another webpage

Question

I have multiple webpages that only contain a single number in the HTML code, nothing else. These get updated from an IOT device I made. I also have a main data webpage, that is meant to display all of the data on one page. However, I cannot figure out how to extract the number the data webpages' in the HTML code of the main data webpage.

The only workaround I have found is by using iframes, but this seems very clumsy, and not "pleasing for the eyes". Is there any way to do this using HTML, or maybe javascript? I am very new to web development. The only restriction is that I cannot change how the data is uploaded from the IoT device, so it has to be extracted from the individual data webpages that contain only numbers.

Thanks in advance:)

Answer 1

Once you find the Javascript selector for the innerHTML of your iFrame, you can get the value out of the iframe for use within the parent or window:

//Getting a value from the first iframe
//Assumes the page in the iframe only contains a single plaintext value
myValue = document.querySelectorAll('iframe')[0].contentWindow.document.body.innerText;

To make it more appealing you could easily hide the iFrame:

//Hiding the embedded iframes
for (var i=0; i<document.querySelectorAll('iframe').length; i++){
    document.querySelectorAll('iframe')[i].style.visibility = "hidden";
};

Answer 2

What you need to do is

1. Fetch the html pages
2. Parse the data from each page
3. Render it to your current page

This is not trivial task, mostly because parsing and handling multiple fetches that may take random amount of time to complete. And browser security restrictions in case the files are in different domains. It would be better if the individual files were.json files not html files.

Here is a codesandbox with a simple example: https://codesandbox.io/s/sleepy-borg-kuye6?file=/src/index.js

Here is one tutorial:https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/