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

Question

基本上，我有一个名为 的 html 文件，panel其中包含一个简单的 DIV，我想将其插入到另一个主 HTML 文件中。

我不想使用 Web 组件，而是想实现一个简单的解决方案，如本答案中所述。

因此，这就是我正在做的测试（只需将面板记录到控制台）：

面板.html

<div id="panel">
    <h1>It works...</h1>
    </div>

获取模板.ts

export 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);

}

主要.ts

import { 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 将指向不存在的文件。