时间戳

首页 > 解决方案 > 使用 fetch 将本地 HTML 页面导入另一个 HTML 页面

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

问题描述

基本上，我有一个名为的 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);
}

main.ts

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

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

控制台记录“null”。

如果此信息可以产生任何影响，我正在使用 parcel-bundler 来构建应用程序。

标签： javascripthtmltypescriptfetchweb-component

解决方案

实际问题是由@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 将指向一个不存在的文件。

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

推荐阅读