使用 fetch 将本地 HTML 页面导入到另一个 HTML 页面

Question

基本上，我有一个名为panel的 html 文件，其中包含一个简单的 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);
}

主文件

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文件夹的

所以解决方案是考虑panel.html最终会有的URL，在用parcel构建之前提前参考。

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

main.ts（新）

import { getTemplate } from './get-template'

getTemplate('./panel.html','#panel').then((panel) => {console.log(panel);})

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

我看到有一个关于在parcel存储库中自动复制静态（或资产）文件的github问题，提供的解决方案之一是使用插件parcel-plugin-static-files-copy 。