Как импортировать html файл в другой html файл c помощью JS/jQuery?
Как импортировать html файл в другой html файл c помощью JS/jQuery? Мне нужно избежать дублирования кода.
Ответы (2 шт):
Существует огромное количество способов включить один HTML в другой.
Способы композиции можно разделить на основные типы по месту/времени отработки:
- во время публикации (генератор статических сайтов, например Jekyll / GitHub Pages)
- на сервере, при обработке запроса HTML (SSI
<!--#include..., или любые языки и шаблонизаторы) - на клиенте (далее рассматривается она)
Если вам есть дело до SEO, то лучше проконсультироваться по поводу применимости композиции на клиенте.
Вариант с React-компонентом: если включается не документ с текстом, а интерактивный элемент (например калькулятор или корзинка), то его лучше не делать HTML-ем.
Вариант с jQuery с дополнительными запросом: $("#content").load("menu.html")
Вариант без библиотек с дополнительными запросом:
function include(selector,address){
fetch(address).then(resp => resp.text())
.then(data => { document.querySelector(selector).innerHTML = data } )
}
Вариант с js-bundler (например, в webpack loader): HTML при сборке (во время публикации) преобразуется в js-строку в составе бандла, который подгружается целиком.
Вариант с "Web Components": в этом случае включаемый HTML больше изолирован.
Существует также множество вариаций этих и других способов.
document.querySelector(selector).appendChild(html);
$("#elem").append(html)