如何從外部 HTML 文檔訪問元素？

Question

我正在嘗試構建一個小項目，在其中創建一個新的 HTML 文檔（這將是電子商務產品的單個頁面），另一個文檔從該創建的文檔中獲取信息。 但是，我不知道如何從外部文檔中提取信息，而不必使用<iframe>嵌入整個頁面。

如果我使用document.querySelector()或任何其他類似函數，我可以從具有id和class的元素中獲取引用。 但是，此函數將從我正在處理的 JS 代碼中的 HTML 文檔中獲取元素。

為了舉例說明我的問題，讓我們支持我在products.html文檔中有<div id="p1"></div>以使用#p1元素，我必須這樣做： let p1 = document.querySelector("#p1") 。

但是如果我有一個index.html文檔並且我想使用products.html的<div id="p1"></div>元素，我該怎么做呢？

Answer 1

使用一個js文件並在products.html和index.html中調用它

Answer 2

您可以將 html 文件作為文本獲取，對其進行解析，然后運行 ​​querySelector

fetch("products.html").then(r=>r.text()).then((html)=>{ // get the content of products.html
  let element = document.createElement("html");
  element.innerHTML = html; // parse the html
  let p1 = element.querySelector("#p1");
});

請記住，兩個文檔必須位於同一來源（請參閱： CORS ），因此您不能使用它來抓取第三方網站