Как получить содержимое HTML в JS из другого файла?

Question

[Sandman0102]

Есть Vue компонент, где есть свой html и js.
Также есть файл sample.html, в котором много контента. Нужно при клике на кнопку в компоненте подгрузить внешний html файл и получить весь его body.
Можно ли как-то это сделать? Пробовал по rel="import', не получается

Comments

[Антон Антон]

а "внешний sample.html" - он где хранится? в самом проекте, или на внешнем ресурсе? если в самом проекте, то можно вебпаком его импортировать как raw

Answer 1

[Dino Winchester]

Как вариант можно использовать Fetch API.

Простой пример на обычном JS:

const button = document.querySelector(".button");
const container = document.querySelector(".container");

button.addEventListener("click", async () => {
   const response = await fetch("./path/sample.html");
   const result = await response.text();
   const parser = new DOMParser();
   const DOM = parser.parseFromString(result, "text/html");
   const targetContent = DOM.querySelector("body").innerHTML;

   container.insertAdjacentHTML("afterbegin", targetContent);
});

Думаю большого труда не составит переделать под свои нужды.

Answer 2

[paxa-1331]

Вроде тут все расписано:
1. https://efim360.ru/kak-podgruzit-html-kod-iz-fajla...
2. https://translated.turbopages.org/proxy_u/en-ru.ru...