從 web 頁面中提取數據並插入到另一個網頁的 html 代碼中

Question

我有多個網頁在 HTML 代碼中只包含一個數字，僅此而已。 這些是從我制作的 IOT 設備上更新的。 我還有一個主數據網頁，旨在在一頁上顯示所有數據。 但是，我無法弄清楚如何在主數據網頁的 HTML 代碼中提取數據網頁的編號。

我發現的唯一解決方法是使用 iframe，但這似乎很笨拙，而且不“賞心悅目”。 有沒有辦法使用 HTML 或 javascript 來做到這一點？ 我對 web 開發非常陌生。 唯一的限制是我無法更改從 IoT 設備上傳數據的方式，因此必須從僅包含數字的單個數據網頁中提取數據。

提前致謝：）

Answer 1

一旦找到 Javascript 選擇器用於 iFrame 的 innerHTML，您就可以從 iframe 或 Z02FBF245B8AC74DEC706 中獲取值

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

為了使其更具吸引力，您可以輕松隱藏 iFrame：

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

Answer 2

你需要做的是

1. 獲取 html 頁面
2. 解析每一頁的數據
3. 將其渲染到當前頁面

這不是一項簡單的任務，主要是因為解析和處理可能需要隨機時間才能完成的多個提取。 和瀏覽器安全限制，以防文件位於不同的域中。 如果單個文件是.json 文件而不是 html 文件會更好。

這是一個帶有簡單示例的代碼框： https://codesandbox.io/s/sleepy-borg-kuye6?file=/src/index.js

這是一個教程：https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/