Как включить один HTML файл в другой?

Простая директива включения на стороне сервера для подключения другого файла, который находится в той же папке, выглядит следующим образом:

<!--#include virtual="a.html" -->

Также можно попробовать следующий вариант:

<!--#include file="a.html" -->

Разница между virtual и file заключается в том, что virtual указывает на виртуальный путь (например, относительно корня веб-сервера), а file — на локальный путь к файлу относительно текущего документа. Выбор подходящего способа зависит от вашей структуры каталогов и требований к доступу к файлам.

Если вы ищете способ динамически включать содержимое HTML-файлов, обратите внимание на библиотеку, которую я разработал для решения этой задачи — csi.js.

С помощью этой библиотеки вы можете использовать следующий HTML-код:

<div data-include="/path/to/include.html"></div>

При этом содержимое файла /path/to/include.html будет загружено и заменит этот div. Это может быть очень удобно для организации вашего контента и уменьшения дублирования кода.

Нет необходимости в скриптах и каких-либо сложных решениях на стороне сервера (хотя это, вероятно, будет лучшим вариантом).

<iframe src="/path/to/file.html" seamless></iframe>

Поскольку старые браузеры не поддерживают атрибут seamless, вам нужно добавить немного CSS для исправления:

iframe[seamless] {
    border: none;
}

Имейте в виду, что для браузеров, не поддерживающих seamless, при клике по ссылке в iframe, он будет переходить по этой ссылке внутри самого фрейма, а не в окне браузера. Один из способов обойти это — установить target="_parent" для всех ссылок в iframe, хотя поддержка браузерами этого свойства «достаточно хорошая».

Вот мой встроенный решение:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();

При использовании этого кода, вы можете добавить HTML-теги <include> в свой документ, чтобы динамически загружать содержимое из внешних файлов. Например:

<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>

При выполнении данного скрипта, содержимое из файлов a.html и b.html будет загружено и вставлено после соответствующих тегов <include>, а сами теги будут удалены. Это позволяет легко организовывать ваши HTML-страницы и загружать контент по мере необходимости.

Если нужно включить HTML-содержимое из какого-то файла, можно использовать следующий подход. Например, строка ниже позволит включить содержимое файла piece_to_include.html в том месте, где определяется элемент <object>.

...текст перед...

<object data="file_to_include.html">
    Внимание: файл file_to_include.html не может быть включен.
</object>

...текст после...

Ссылка на источник: W3C HTML 4.0