ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку
logo

Вставка содержимого одного HTML файла в другой: JS, CSS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для внедрения внешнего HTML в DOM возможны следующие варианты: использование API fetch средствами JavaScript или вставка через iframe:

HTML
Скопировать код
<div id="content"></div>
<script>
fetch('someFile.html')
.then(response => response.text())
.then(html => document.getElementById('content').innerHTML = html);
</script>

Или через iframe:

HTML
Скопировать код
<iframe src="someFile.html"></iframe>

Выбирайте вариант с JavaScript, если требуется интеграция без перезагрузки страницы, или iframe для изолированного отображения содержимого.

Метод jQuery .load() для мгновенной вставки

Для быстрого подключения HTML-файлов можно использовать метод jQuery .load(). Сначала подключите jQuery в <head> основного файла 'a.html':

HTML
Скопировать код
<head>
  <script src="jquery.js"></script>
</head>

Укажите место для вставки содержимого из 'b.html':

HTML
Скопировать код
<div id="includedContent"></div>

В конце, подгрузите файл с помощью jQuery .load():

JS
Скопировать код
$(function(){
  $('#includedContent').load('b.html'); 
});

Вставка контента с помощью document.write

Метод JavaScript document.write позволяет добавить HTML непосредственно в DOM во время загрузки страницы. Это также просто и знакомо, как виниловая пластинка.

JS
Скопировать код
document.write('<h1>Добро пожаловать на мой сайт!</h1>');

Внимание: данному методу требуется особое внимание, так как специальные HTML-символы должны быть экранированы.

Метод .js для упрощения использования

HTML-файлы можно преобразовать в .js файлы, что хорошо подойдёт для данной задачи. JavaScript шаблонные строки облегчат встраивание многострочного контента.

Импорты HTML5: взгляд в будущее

В HTML-импортах, которые являются частью экосистемы Web Components, возможен импорт прямо в тег head:

HTML
Скопировать код
<head>
  <link rel="import" href="b.html"> 
</head>

Несмотря на их функциональность, поддержка браузерами ограничена.

Организация HTML-файлов

Создайте директорию views/ для хранения HTML-фрагментов, которые надо много раз вставить.

Управление множеством вставок

Для упрощения работы с подключаемыми компонентами используйте атрибуты data-include. Они дадут возможность динамически подключать элементы одним кликом.

Визуализация

iframe и object можно представить как рамки для вашего основного HTML:

Ваш основной HTML (🏠) — это стена для картины.

iframe — это как окно с прозрачным стеклом:

HTML
Скопировать код
<iframe src="myfile.html" style="border:none;"></iframe>

🖼️🏠: Ваш сайт с новым 'окном'!

object — это рамка для картины, но с расширенной функциональностью:

HTML
Скопировать код
<object data="myfile.html" style="border:none;"></object>

🎨🏠: Страница вашего сайта стала интерактивной!

Ускорение подключения через SSI

Если хостинг поддерживает Server-Side Includes (SSI), можно использовать эту возможность для ускорения загрузки страницы:

HTML
Скопировать код
<!--#include virtual="header.html" -->

Сведения об использовании SSI найдите в документации вашего хостинга.

Управление подсказками с библиотекой JavaScript Tooltip

Для управления подсказками в динамике используйте библиотеку JavaScript Tooltip.js и выделите их в отдельные HTML-элементы, чтобы упростить их интеграцию.

Встроенные решения сторонних разработчиков: csi.js

Сторонние библиотеки, вроде csi.js от LexmarkWeb, облегчают процесс встраивания HTML. К ним прилагаются подробные инструкции по использованию.

Полезные материалы

  1. Как включить HTML — учебник от W3Schools с методами включения HTML.
  2. <iframe>: Элемент встроенного фрейма — подробное руководство от MDN Web Docs по использованию <iframe>.
  3. Включение другого HTML-файла в HTML-файл — обсуждение на Stack Overflow с примерами и решениями от сообщества.
  4. Импорт HTML — статья на CSS-Tricks об импорте HTML и его возможных перспективах.
  5. Can I use... Поддерживается ли... — таблицы совместимости браузеров для использования HTML-включений и импорта.
  6. Страница не найдена · GitHub — полифилл для элемента шаблона включения HTML, поддерживающий работу в старых браузерах.