Импорт локальной HTML страницы с извлечением на другую HTML страницу - PullRequest
Новая
       5

Импорт локальной HTML страницы с извлечением на другую HTML страницу

0 голосов
/ 31 марта 2020

По сути, у меня есть html файл с именем panel, содержащий простой DIV, который я хотел бы вставить в другой основной HTML файл.

Вместо использования веб-компонентов, я хотел бы реализовать простое решение, как описано в этот ответ .

Итак, вот что я делаю для тестирования (просто ведя панель на консоль):

панель. 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);})

Консоль регистрирует «ноль».

Если эта информация может иметь какое-либо значение, я использую parcel-bundler для сборки приложения.

1 Ответ

0 голосов
/ 31 марта 2020

Фактическая проблема была определена @ CBroe и касалась того факта, что когда parcel собирает мое приложение, путь к файлу моего panel.html ресурса изменяется относительно встроенного dist папка.

Просто чтобы уточнить:

  • перед построением пути относительно main.ts файла
  • после построения пути относительно dist папка

Таким образом, решение заключается в том, чтобы подумать о конечном URL, который будет иметь panel.html, и заранее обратиться к нему, прежде чем создавать его с помощью участка.

Что-то подобное будет работать в мой случай:

main.ts (новый) 

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

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

Тогда, конечно, другим шагом будет копирование самого файла panel.hml в dist, иначе URL будет указывать на несуществующий файл.

Я вижу, что проблема github об автоматическом копировании stati c (или ресурсов) файлов в хранилище участков и одним из предложенных решений является использование плагина parcel-plugin-static-files-copy .

...