通过 fetch 导入本地 HTML 页面到另一个 HTML 页面

Question

基本上，我有一个名为 的 html 文件，panel其中包含一个简单的 DIV，我想将其插入到另一个主 HTML 文件中。我不想使用 Web 组件，而是想实现一个简单的解决方案，如本答案中所述。因此，这就是我正在做的测试（只需将面板记录到控制台）：面板.html<div id="panel">     <h1>It works...</h1>     </div>获取模板.tsexport async function getTemplate(filepath: string, selectors: string) {    let response = await fetch(filepath);    let txt = await response.text();    let html =  new DOMParser().parseFromString(txt, 'text/html');    return html.querySelector(selectors);}主要.tsimport { getTemplate } from './get-template'getTemplate('/path/to/panel.html','#panel').then((panel) => {console.log(panel);})控制台记录“null”。如果此信息有任何影响，我将使用 Parcel-bundler 来构建应用程序。

Answer 1

实际问题是由@CBroe确定的，问题是在parcel构建我的应用程序时，我的资源的文件路径panel.html更改为相对于构建的dist文件夹。

只是为了澄清：

• 在构建之前路径是相对于main.ts文件的

• 构建后路径是相对于dist文件夹的

因此，解决方案是考虑最终的 URL panel.html，并在使用 Parcel 构建之前提前参考它。

像这样的事情在我的情况下会起作用：

main.ts（新）

import { getTemplate } from './get-template'
getTemplate('./panel.html','#panel').then((panel) => {console.log(panel);})

当然，另一步是将实际panel.hml文件复制到dist目录中，否则 URL 将指向不存在的文件。