Получить профессию в Skypro
Вставка содержимого одного HTML файла в другой: JS, CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для внедрения внешнего HTML в DOM возможны следующие варианты: использование API fetch средствами JavaScript или вставка через iframe:
<div id="content"></div>
<script>
fetch('someFile.html')
.then(response => response.text())
.then(html => document.getElementById('content').innerHTML = html);
</script>Или через iframe:
<iframe src="someFile.html"></iframe>Выбирайте вариант с JavaScript, если требуется интеграция без перезагрузки страницы, или iframe для изолированного отображения содержимого.
Метод jQuery .load() для мгновенной вставки
Для быстрого подключения HTML-файлов можно использовать метод jQuery .load(). Сначала подключите jQuery в <head> основного файла 'a.html':
<head>
<script src="jquery.js"></script>
</head>Укажите место для вставки содержимого из 'b.html':
<div id="includedContent"></div>В конце, подгрузите файл с помощью jQuery .load():
$(function(){
$('#includedContent').load('b.html');
});Вставка контента с помощью document.write
Метод JavaScript document.write позволяет добавить HTML непосредственно в DOM во время загрузки страницы. Это также просто и знакомо, как виниловая пластинка.
document.write('<h1>Добро пожаловать на мой сайт!</h1>');Внимание: данному методу требуется особое внимание, так как специальные HTML-символы должны быть экранированы.
Метод .js для упрощения использования
HTML-файлы можно преобразовать в .js файлы, что хорошо подойдёт для данной задачи. JavaScript шаблонные строки облегчат встраивание многострочного контента.
Импорты HTML5: взгляд в будущее
В HTML-импортах, которые являются частью экосистемы Web Components, возможен импорт прямо в тег head:
<head>
<link rel="import" href="b.html">
</head>Несмотря на их функциональность, поддержка браузерами ограничена.
Организация HTML-файлов
Создайте директорию views/ для хранения HTML-фрагментов, которые надо много раз вставить.
Управление множеством вставок
Для упрощения работы с подключаемыми компонентами используйте атрибуты data-include. Они дадут возможность динамически подключать элементы одним кликом.
Визуализация
iframe и object можно представить как рамки для вашего основного HTML:
Ваш основной HTML (🏠) — это стена для картины.
iframe — это как окно с прозрачным стеклом:
<iframe src="myfile.html" style="border:none;"></iframe>🖼️🏠: Ваш сайт с новым 'окном'!
object — это рамка для картины, но с расширенной функциональностью:
<object data="myfile.html" style="border:none;"></object>🎨🏠: Страница вашего сайта стала интерактивной!
Ускорение подключения через SSI
Если хостинг поддерживает Server-Side Includes (SSI), можно использовать эту возможность для ускорения загрузки страницы:
<!--#include virtual="header.html" -->Сведения об использовании SSI найдите в документации вашего хостинга.
Управление подсказками с библиотекой JavaScript Tooltip
Для управления подсказками в динамике используйте библиотеку JavaScript Tooltip.js и выделите их в отдельные HTML-элементы, чтобы упростить их интеграцию.
Встроенные решения сторонних разработчиков: csi.js
Сторонние библиотеки, вроде csi.js от LexmarkWeb, облегчают процесс встраивания HTML. К ним прилагаются подробные инструкции по использованию.
Полезные материалы
- Как включить HTML — учебник от W3Schools с методами включения HTML.
- <iframe>: Элемент встроенного фрейма — подробное руководство от MDN Web Docs по использованию
<iframe>. - Включение другого HTML-файла в HTML-файл — обсуждение на Stack Overflow с примерами и решениями от сообщества.
- Импорт HTML — статья на CSS-Tricks об импорте HTML и его возможных перспективах.
- Can I use... Поддерживается ли... — таблицы совместимости браузеров для использования HTML-включений и импорта.
- Страница не найдена · GitHub — полифилл для элемента шаблона включения HTML, поддерживающий работу в старых браузерах.