如何从外部 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 ），因此您不能使用它来抓取第三方网站