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

Question

Basically, I have a html file called panel containing a simple DIV that I would like to insert into another main HTML file.

Instead of using web components, I'd like to implement a simple solution as described in this answer .

So, here is what I am doing for testing (just logging the panel to console):

panel.html

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

get-template.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);})

The console logs "null".

If this info could make any difference, I am using parcel-bundler to build the application.

Answer 1

The actual problem was determined by @CBroe and was about the fact that when parcel builds my application, the file path of my panel.html resource changes to be relative to the built dist folder.

Just to clarify:

• before building the path is relative to the main.ts file
• after building the path is relative to the dist folder

So the solution is to think about the final URL the panel.html will have, and refer to it in advance before building with parcel.

Something like this would work in my case:

main.ts (new)

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

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

Then of course, the other step will be to copy the actual panel.hml file into the dist directory, otherwise the URL will point to a non existing file.

I see there was a github issue about automatically copy static (or assets) files in the parcel repository, and one of the solution provided is to use the plugin parcel-plugin-static-files-copy .