Как включить html-файл в html

Обновлено: 21.11.2024

В этой статье будут представлены методы включения файла HTML в файл HTML.

Используйте метод jQuery load() для включения файла HTML в файл HTML

Метод jQuery load() позволяет загружать данные с сервера. Данные будут отображаться в выбранном контейнере. Мы можем использовать метод load() для включения другого HTML-файла в текущий HTML-файл. Синтаксис метода load() следующий.

Метод load() принимает загружаемый URL в качестве первого параметра. У него есть два других параметра, данные и функция обратного вызова, которые являются необязательными. Данные параметра — это данные, которые будут отправлены на сервер при обработке запроса. Функция обратного вызова будет выполнена, если метод load() завершится.

Чтобы запустить jQuery, нам нужно использовать CDN jQuery в теге скрипта в HTML. Например, перейдите в CDN и выберите минимизированный вариант последней версии jQuery. После этого скопируйте код и вставьте его в файл index.html. Далее создайте div с id otherContent в HTML. Затем создайте тег p и напишите текст This is from index.html. Создайте еще один HTML-файл с именем lake.html и напишите абзац This is from lake.html. В index.html напишите функцию jQuery. Выберите идентификатор AnotherContent и вызовите метод load() с озером.html в качестве параметра.

Использование JavaScript для включения файла HTML в файл HTML

Мы можем использовать JavaScript для включения HTML в файл HTML. Преимущество использования этого метода с использованием jQuery заключается в том, что нам не нужно загружать какие-либо файлы jQuery, которые уменьшают размер нашего файла. Мы можем использовать литералы шаблонов в JavaScript для написания HTML. Мы можем достичь нашей цели, включив файл JavaScript в наш файл HTML и написав HTML в файле JavaScript.

Например, в файле index.hmtl свяжите файл lake.js, используя атрибут src в теге script. В разделе body напишите текст This is from index.html . В файле lake.js используйте document.write() для записи HTML. Используйте литералы шаблона для написания HTML внутри метода. Другими словами, оберните содержимое HTML обратными кавычками. Напишите тег p внутри метода и напишите текст This is HTML from lake.js .

В разделе вывода мы видим тексты из обоих файлов. Таким образом, мы можем включить HTML в файл HTML с помощью JavaScript.

Статьи DelftStack написаны такими же фанатами программного обеспечения, как и вы. Если вы также хотите внести свой вклад в DelftStack, написав платные статьи, вы можете посетить страницу «Написать для нас».

сообщить об этом объявлении

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Меня очень удивляет, что в HTML никогда не было возможности включать в себя другие HTML-файлы. И, кажется, на горизонте нет ничего, что могло бы решить эту проблему. Я говорю о прямых включениях, например, о том, чтобы взять кусок HTML и вставить его прямо в другой. Например, вариант использования для большей части всего Интернета, включая верхний и нижний колонтитулы для всех страниц:

Кстати, это неправда. Я просто хочу, чтобы это было так.

Люди всегда искали другие языки для решения этой проблемы. В некотором смысле это предварительная обработка HTML. Задолго до того, как мы приступили к предварительной обработке нашего CSS, мы использовали инструменты для управления нашим HTML. И мы до сих пор им пользуемся, потому что идея включения полезна практически на каждом веб-сайте в мире.

Можете ли вы вместо этого использовать PHP?

Это будет выполнять включение на уровне сервера, делая запрос на это на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.

Что еще быстрее, чем включение на стороне сервера? Если включение предварительно обработано еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include.

Это будет выглядеть так:

И вы бы обработали это следующим образом:

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

Это то, что делает плагин grunt-bake. Вы бы настроили Grunt для обработки вашего HTML:

Тогда ваш HTML может использовать этот специальный синтаксис для включения:

Вы регистрируете их:

Есть также интересные функции, которые позволяют оценивать и передавать данные. Вам все равно понадобится процессор для его запуска, возможно, что-то вроде gulp-handlebars.

Говоря о языках шаблонов, в которых используются фигурные скобки… Они есть и в Mustache.

Pug — это препроцессор HTML с совершенно новым синтаксисом HTML, который немного короче. Однако он включает в себя.

Затем вы запускаете его с помощью gulp-pug.

Если вы поместите это в файл с именем index.njk , вы сможете преобразовать его с помощью простого скрипта Node в index.html следующим образом:

Или обработайте его чем-то вроде gulp-nunjucks.

11ty имеет встроенный Nunjucks, как и многие другие, упомянутые ранее. Вам может быть полезно, если вы на самом деле создаете небольшой сайт.

Вы можете получить содержимое верхнего и нижнего колонтитула из соответствующих файлов и выгрузить содержимое.

Кстати, о JavaScript… Если вы создаете свой сайт с помощью JavaScript-фреймворка практически любого типа, построение с использованием компонентов является основным делом, и ломать части, которые вы хотите включить в другие файлы, не должно быть проблемой. Какой-то заголовок импорта из "./header.js"; и это территория, на которой вы находитесь в мире React.

Вы можете сделать это:

Но содержимое этих фреймов не использует один и тот же DOM, поэтому это немного странно, не говоря уже о медленном и неудобном стиле (поскольку фреймы не знают высоту своего содержимого).

Скотт Джел задокументировал классную идею: iframe может вставлять свое содержимое на родительскую страницу, а затем удалять себя.

Коля Корруптис написал об этой адаптации, которая будет включать в себя больше, чем первый дочерний элемент тела, если в вашем HTML-файле есть это:

Jekyll – это генератор статических сайтов на основе Ruby, включающий в себя. Вы храните свои включения в папке /_includes/, а затем:

Jekyll — большой, поэтому я называю его здесь, но существует множество генераторов статических сайтов, и я готов поспорить, что любой из них может включать в себя.

Хорошо, я вызову еще одну SSG, потому что она новая и суперцелеустремленная. У Сергея формат стиля веб-компонентов:

Вы должны назвать файлы header.html и footer.html и поместить их в /includes/, а затем будет создана сборка с обработанными включениями, когда вы запустите скрипт npm, который у вас есть.

Apache, супер-пупер распространенный веб-сервер, может включать в себя. Вы делаете это так:

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

Я попытался использовать .htaccess в папке на сервере Apache и переключился на то, что мне показалось правильным:

Я уверен, что есть какой-то способ заставить его работать, и если вы это сделаете, то неплохо, что ему не нужны никакие другие зависимости.

Только для Mac, но в CodeKit есть специальный язык под названием Kit, который он обрабатывает, 90 % которого состоит из HTML. Он использует специальные комментарии HTML:

Много способов, не так ли?

Как я уже сказал выше, меня очень удивляет, что сам HTML не решает эту проблему напрямую. Не то чтобы я думаю, что было бы отличной идеей для производительности иметь операторы, которые запускают сетевые запросы по всему нашему коду, но это похоже на платформу. Использование импорта ES6 напрямую без связывания тоже не всегда хорошая идея, но у нас они есть. @импортировать CSS в CSS — не всегда хорошая идея, но она у нас есть. Если бы у платформы был собственный синтаксис, возможно, другие инструменты отключили бы его, подобно тому, как сборщики JavaScript поддерживают формат импорта ES6.

Смейтесь, но шаблоны Dreamweaver — это самое большое, чего мне не хватает в веб-разработке примерно в 2001 году. Абсолютно простые, гибкие предварительные просмотры WYSIWYG, никаких хрупких зависимостей или странных ошибок сборки.

Для полноты картины я уже делал это с помощью jQuery. (Я уверен, что это считается «использовать AJAX», но все же.)

Вау, Dreamweaver попал в список, но не SHTML, грустно.

Вы также можете использовать pHTML, если хотите, чтобы он выглядел естественно.

Разве Apache SSI не требует, чтобы файлы HTML использовали расширение .shtml?

Расширение по умолчанию — .shtml, но вы можете добавить эту строку в свой файл .htaccess, если предпочитаете придерживаться .html:
AddHandler server-parsed .html

SSI: включение на стороне сервера

Включения на стороне сервера (SSI) — это команды на языке PERL, которые позволяют собирать информацию с сервера. PERL и CGI существуют с момента появления Интернета, и все эти другие языки высокого уровня основаны на возможностях PERL.

Идея заключается в использовании сервера для сбора и публикации информации. Таким образом, вы не сталкиваетесь с проблемами версии браузера. Включаемая вещь включается до того, как попадет в браузер, поэтому версии никогда не вступают в игру.

Большинство серверов UNIX настроены для запуска SSI. Тем, кто работает на серверах на базе WindowsNT, возможно, придется использовать ASP, чтобы получить многие из этих эффектов, но сначала проверьте, прежде чем решить, что вы не можете выполнять эти команды. Возможно, вы сможете.

Долгое время я предпочитал SSI. Я использовал его с Apache, IIS и Nginx. Однако вам действительно нужен контроль над сервером, чтобы гарантировать настройку. Позже, во дни хрюканья, я использовал запекание и нунджуки. В наши дни это все React. Заставляет вас задаться вопросом, был бы React вещью, если бы ваш тег включения существовал с самого начала…

Импорт NHTML должен был быть оригинальным способом позаботиться об этом.Импорт был частью предложения веб-компонентов, но браузеры не реализовывали стандарт.

На самом деле, первый опубликованный вами пример почти настоящий. Я использовал именно этот синтаксис в проекте, который использует Parcel в качестве сборщика. Его очень легко настроить, и все, что вам нужно сделать, это создать пакет index.html, и все готово.

Вы можете заставить серверную часть работать, используя include virtual вместо include file

Импорт HTML — это очень круто, и я знаю, что многих людей огорчает, что они практически мертвы.

Но также я на 99% уверен, что они никогда не предназначались для того, чтобы просто вставить фрагмент HTML в другой HTML-документ, как это делает include.

Импорт не получил полной поддержки от Mozilla, потому что в спецификации были проблемы.

Одна из самых больших проблем заключалась в том, что вам по-прежнему нужно было писать Javascript, чтобы заставить их работать, а в момент, когда вы используете Javascript, вы могли бы просто полифилить свой собственный компонент импорта. Mozilla сочла, что в свете того факта, что импортировать с помощью Javascript довольно легко, и в свете того факта, что в сообществе существуют разногласия по поводу того, какой «лучший» способ сделать это, было бы лучше использовать Progressive Web. подойдите и подождите и посмотрите, как развивалось сообщество.

Я думаю, что отказаться от них было абсолютно правильным решением. То, о чем говорит Крис, гораздо проще и понятнее, что можно использовать, не углубляясь в веб-компоненты.

Если вы используете кеш-сервер, такой как лак, вы можете использовать esi. С помощью esi вы можете не только создавать свои веб-страницы как компоненты, но и сами компоненты могут находиться на разных серверах.

Очень приятно видеть, что существует так много способов включения файлов… Особенно опция iframe с самоуничтожением..

Вы когда-нибудь слышали о фреймах, наборе фреймов?

Да, существует множество способов предварительно обработать это на сервере. Но, к сожалению, нет стандартного HTML-способа сделать это, встроенного в сам язык. И это настоящая проблема. Конечно, вы можете сделать это в серверной среде, конечно, вы можете сделать это с помощью AJAX, конечно, вы можете сделать это с помощью хака Apache — но реальной вещи все еще не хватает. У вас нет собственного HTML-импорта внутри языка HTML. Соединить две страницы в одну невозможно. И это печально.

Я думал об этом на днях и о том, насколько это важно в мире интерфейсных фреймворков, основанном на компонентах. Это поможет с возможностью повторного использования и модульностью, и все это нативно. Насколько это было бы интересно?

Хорошо. Вероятно, стоит добавить, что опция PHP также может использоваться как техника на стороне клиента, аналогичная grunt/gulp и т. д.

Насколько я помню, импорт HTML должен был выполнять эту работу, но на самом деле он умирает из-за устаревания…

Я почти уверен, что магия включения в Jekyll является дополнением к Liquid, поэтому вам не нужен весь генератор, если это все, что вам нужно.

Еще один интересный метод — использование веб-компонентов.

Определить пользовательский элемент, т. е.

напишите код шаблона и включите JavaScript.

Мне они очень нравятся

Мне очень нравилось использовать file-include в моих сценариях NPM последние пару лет, но недавно я стал поклонником использования Handlebars с Panini, как это делает Foundation в своих расширенных параметрах сборки.
Разговаривают ли рабочие группы или поставщики о том, почему нет нативного решения?

Что касается языка Codekit Kit, Prepros поддерживает его на Mac и Windows.

Еще один способ включить HTML с помощью Gulp или Grunt — это плагин processhtml. В синтаксисе используются комментарии HTML:

Кроме того, он включает разные файлы для каждой среды. Например, вы можете использовать минимизированный HTML для производства.

К вашему сведению, чтобы опция включения PHP работала, вам необходимо указать веб-серверу обрабатывать файлы .html, как если бы они были PHP. То, как это достигается, во многом зависит от настройки вашего сервера, но независимо от этого это отрицательно скажется на производительности, поскольку раньше ваш сервер просто захватывал и возвращал текстовый документ, а теперь он должен создавать поток PHP и обрабатывать HTML как если бы это был код PHP. Даже для такой простой задачи, как эта, неизбежно будет потребляться больше ресурсов ЦП/памяти для каждой страницы — даже если ваша страница вообще не содержит PHP, PHP все равно будет анализировать ее.

Если вы используете Apache, то для простого включения, подобного этому, SSI — гораздо лучший вариант. Не уверен, в чем может заключаться ваша проблема (хотя использование .htaccess будет работать только в том случае, если базовая конфигурация Apache позволяет это), но я очень успешно использовал его в прошлом. Он очень оптимизирован и поэтому (по моему опыту) оказывает незначительное влияние на производительность.

Понравилась статья, Крис.Это немного раздражает, это, вероятно, сделало бы нашу жизнь намного проще, вероятно, использование CMS значительно сократилось бы, я помню, что использовал Drupal или WordPress десятки раз, а не только HTML, потому что я был посередине, не совсем нуждался в целых лесах с банан, но по-прежнему не хватает функций, которые предлагает HTML. Кроме того, фреймворков было слишком много для такого крошечного проекта… Надеюсь, однажды…
Ура!

У меня есть 2 HTML-файла, предположим, a.html и b.html . В a.html я хочу включить b.html .

В JSF я могу сделать это так:

Это означает, что внутри файла .xhtml я могу включить файл b.xhtml .

Как это сделать в файле *.html?

40 ответов 40

На мой взгляд, лучшее решение использует jQuery:

Этот метод является простым и понятным решением моей проблемы.

Документация по jQuery .load() находится здесь.

Я именно такой, как вы упомянули. Я использую bootstrap и перезаписываю css для B.html. Когда я использую B.html в A.html, чтобы он стал заголовком A.html, я вижу, что css потерял свой приоритет и имеет другой макет. Какие-нибудь решения для этого?.

Расширяя ответ lolo, вот еще немного автоматизации, если вам нужно включить много файлов. Используйте этот код JS:

А затем включить что-то в html:

К ним относятся файлы views/header.html и views/footer.html .

Очень полезно. Есть ли способ передать аргумент через другой параметр данных, например data-argument, и получить его во включенном файле?

не работает в Chrome с локальными файлами "Запросы между источниками поддерживаются только для схем протоколов: htt"

Мое решение похоже на решение lolo выше. Однако я вставляю HTML-код с помощью JavaScript document.write вместо использования jQuery:

a.html:

b.js:

Причина, по которой я против использования jQuery, заключается в том, что файл jQuery.js имеет размер ~90 КБ, и я хочу, чтобы объем загружаемых данных был как можно меньше.

Чтобы получить правильно экранированный файл JavaScript без особых усилий, вы можете использовать следующую команду sed:

Спасибо Грегу Миншаллу за улучшенную команду sed, которая также экранирует обратную косую черту и одинарные кавычки, которые не учитывались в моей первоначальной команде sed.

В качестве альтернативы для браузеров, поддерживающих литералы шаблонов, также работает следующее:

b.js:

@TrevorHickey Да, вы правы, это недостаток моего решения, и это не очень элегантно. Однако, поскольку вы можете вставить '\' с простым регулярным выражением в конце каждой строки, это работает для меня лучше всего. Хм. возможно, мне следует добавить к моему ответу, как выполнять вставку через регулярное выражение.

О боже, это уродливо, нет, спасибо. Я лучше напишу свой html как html. Меня не волнует, могу ли я использовать sed в командной строке — я не хочу полагаться на это каждый раз, когда я изменяю содержимое шаблона.

@Goodra Он должен работать с любым HTML без пометок '. Если вы просто выполните поиск/замену, чтобы заменить ` на \`, ТОГДА найти/заменить, чтобы заменить ' на \', а новые строки на ``новые строки, все будет работать нормально.

@wizzwizz4: Благодаря Грегу команда sed теперь также не использует одинарные кавычки и обратную косую черту. Кроме того, я добавил bash-скрипт, который сделает всю работу за вас. :-)

Вы можете использовать обратные кавычки ` — тогда вы сможете вставлять такие выражения, как $ — тогда вам нужно только экранировать \` и \$

Например:

Импорт HTML не предназначен для непосредственного включения контента на страницу. Код в этом ответе делает stuff.html доступным как шаблон только на родительской странице, но вам придется использовать скрипт для создания клонов его DOM на родительской странице. страницу, чтобы они были видны пользователю.

Firefox не поддерживает его. Чтобы включить его, попробуйте установить «dom.webcomponents.enabled». Он будет работать только в Chrome и Opera, Android с обновляемым веб-представлением (начиная с 4.4.3). Браузеры Apple не поддерживают его. Это выглядит как хорошая идея для веб-компонентов, но пока не реализована широко.

Бессовестный плагин библиотеки, которую я написал, решает эту проблему.

Приведенный выше код возьмет содержимое /path/to/include.html и заменит им div.

@Сет, похоже, нет. Я собираюсь поиграть с src и посмотреть, смогу ли я это сделать. Спасибо Майклу-Марру

Великолепно. Ваше кажется единственным решением, которое ЗАМЕНЯЕТ тег div, используемый в качестве токена для вставки. Я собираюсь внимательно изучить источник позже!! :-)

спасибо, это работает, оно включает HTML/CSS, но не Javascript из исходных файлов. Вам просто нужно включить его снова везде, где вы используете

. Этот инструмент упрощает создание простого многостраничного макета без использования плагинов.

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

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

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

@Рэнди Так? Это можно считать плюсом (особенно для пользовательского контента и тому подобного). В любом случае вы можете легко снова включить файлы css без повторного запроса из-за кэширования.

Ответил на мои потребности в ответе на этот вопрос - как включить файл html в другой файл html.

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

Также вы можете попробовать:

Очень старое решение, которое я тогда использовал, удовлетворяло мои потребности, но вот как это сделать с кодом, соответствующим стандартам:

Спасибо за предупреждение, @TomášPospíšek. Я больше не могу редактировать свой комментарий, но, надеюсь, ваш ответ даст читателям необходимую информацию. Чтобы было ясно, последнее предложение (о бесшовном атрибуте) является единственной устаревшей частью — остальное остается в силе.

Следующее работает, если необходимо включить содержимое HTML из какого-либо файла: например, следующая строка будет включать содержимое файла piece_to_include.html в том месте, где находится определение ОБЪЕКТА.

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

@MuhammadSaquibShaikh, вы имеете в виду фрагмент? это точно не сработает, потому что у jsfiddle нет многофайловой инфраструктуры

Я загружаю другой html-файл с помощью (с тегом script для файла js), но код js показывает null для выбора элемента DOM

В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php для файлов, заканчивающихся расширением .html.

Теперь вы можете использовать простой php-скрипт для включения других файлов, таких как:

Да, это очень плохой совет. Html-файлы являются статическими и обслуживаются apache очень быстро. Если вы добавите все html-файлы в анализатор php только для включения файлов, у вас будет много проблем с производительностью на ваших серверах. Способ javascript (jQuery или простой JS) не очень хорошие решения, но они все же намного эффективнее и менее опасны, чем этот.

@Gfra54 Вы имеете в виду, что у нас будут проблемы с производительностью, если мы будем использовать Apache только для этого, и мы не будем работать с php для сайта? Или он будет тормозить, если я буду использовать php и эту штуку вместе?

Внимание! Добавление этих строк в .htaccess может привести к тому, что html-страницы будут пытаться загружаться как файлы, а не просматриваться в браузере. Сначала протестируйте. Отказ от ответственности: это случилось со мной только сейчас, когда я попробовал вышеуказанное решение. Мой .htaccess был пуст, за исключением двух строк выше. Предостережение. Вместо этого попробуйте решение jQuery от lolo (см. ниже).

Чувак, я усложнял себе жизнь, хотя уже делал это раньше. Спасибо за напоминание. Для той цели, которая мне нужна, это не сильно влияет на производительность, так что я в порядке.

Ха, этот ответ, снижающий производительность, является прекрасным примером нестандартного мышления. Я бы никогда не предложил это, но, возможно, спасатель, когда вам нужна быстрая кувалда php. :-)

В w3.js include работает следующим образом:

Если вы хотите знать, когда документ был загружен, вы можете поместить это в конец документа: Умный трюк, а?

Вот что мне помогло. Чтобы добавить блок html-кода из b.html в a.html , это должно войти в тег заголовка a.html :

Затем в теге body создается контейнер с уникальным идентификатором и блоком javascript для загрузки b.html в контейнер следующим образом:

@MohammadUsman Здесь контейнер и код javascript лежат в теге body, в то время как принятый ответ помещает их в тег head и оставляет контейнер только в теге body.

Я знаю, что это очень старый пост, поэтому некоторые методы тогда были недоступны. Но вот мой очень простой взгляд на это (на основе ответа Лоло).

Он основан на атрибутах data-* HTML5 и, следовательно, является очень универсальным, поскольку использует функцию jQuery for-each для получения каждого .class, соответствующего «load-html», и использует соответствующий атрибут «источник данных» для загрузки содержание:

Большинство решений работает, но у них есть проблема с jquery:

Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в функции $(document).ready:

(Ключ загружает включенный контент синхронно).

index.htm:

include.inc:

При использовании этого и последующем просмотре исходного кода страницы в браузере вы видите только скрипт. Разве это не влияет на способность поисковых систем анализировать ваш сайт, что в конечном итоге сводит на нет все усилия по поисковой оптимизации?

Например, на странице вы импортируете блок HTML следующим образом:

Блок может иметь собственный импорт:

Импортер заменяет директиву загруженным HTML почти так же, как SSI

Эти директивы будут выполняться автоматически, как только вы загрузите этот небольшой код JavaScript:

Он автоматически обработает импорт, когда DOM будет готов. Кроме того, он предоставляет API, который вы можете использовать для запуска вручную, получения журналов и так далее. Наслаждайтесь :)

Чтобы вставить содержимое указанного файла:

Вот мой подход с использованием Fetch API и асинхронной функции

Вы пробовали внедрять iFrame?

Он вставляет iFrame в документ и удаляет себя (предполагается, что он будет в HTML DOM)

Ответ Атари (первый!) был слишком исчерпывающим! Очень хорошо!

Но если вы хотите передать имя страницы, которая будет включена в качестве параметра URL, в этом сообщении есть очень хорошее решение, которое можно использовать в сочетании с:

Итак, получается что-то вроде этого:

Теперь код a.html выглядит следующим образом:

Это сработало очень хорошо для меня! Надеюсь помог :)

Это создаст ссылку (может измениться на желаемый элемент ссылки, если она уже установлена), установит импорт (если она у вас еще не установлена), а затем добавит ее. Затем он возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу в div. Все это можно изменить в соответствии с вашими потребностями, от добавляемого элемента до используемой вами ссылки. Я надеюсь, что это помогло, теперь это может быть неактуально, если появятся новые и более быстрые способы без использования библиотек и фреймворков, таких как jQuery или W3.js.

ОБНОВЛЕНИЕ. Это вызовет ошибку о том, что локальный импорт заблокирован политикой CORS. Возможно, потребуется доступ к глубокой сети, чтобы иметь возможность использовать это из-за свойств глубокой сети. (Это означает отсутствие практического использования)

Я искал простое решение, которое позволило бы мне включить часть HTML в другой файл HTML без использования серверного языка или необходимости в процессе сборки JavaScript.

Когда я искал в Интернете простое решение, я наткнулся на эту страницу CSS Tricks под названием "The Simplest Ways to Handle HTMLIncludes"

На этой странице Крискойер (создатель CSS-Tricks) написал фрагмент кода, который выглядел следующим образом:

И в следующей строке говорилось, что это не было Настоящим, но он хотел бы, чтобы это было. В остальной части статьи объясняются различные платформы и языки для достижения этой цели.

Ну, это заставило меня задуматься, почему это невозможно, и заставило меня погрузиться в маленькую кроличью нору 🐇 открытий и творчества. Я создал простой скрипт, который вы можете включить в свою HTML-страницу, чтобы сделать это возможным.

Сценарий

Теперь вы можете отображать HTML внутри другого файла HTML, используя следующий тег:

Супер 👏, вы можете увидеть очень быстрый пример из этого кода и окна ниже.

Вот код внутри этой песочницы:

Давайте узнаем, насколько просто это реализовать вручную.

Как это работает

На самом деле это работает довольно просто. Взгляните на неминифицированный скрипт ниже:

Все, что мы делаем, это перебираем все теги в цикле, а затем выполняем простую выборку javascript для извлечения содержимого каждого фрагмента и размещения его после тега. Затем мы удаляем тег включения, и все готово 😉.

Примеры

Вот еще несколько примеров CodeSandbox ниже.

Вы можете видеть, что мы также можем включить в наши партиалы немного простой магии [AlpineJS], и javascript все еще будет работать :)

Как насчет другого примера, в котором используется TailwindCSS.

Заключение

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

Совет

Зарегистрируйте бесплатную учетную запись Jotform, чтобы создавать мощные онлайн-формы за считанные минуты — без кодирования.

Простая разметка в заголовке

Встроить HTML-файл очень просто. Все, что нам нужно сделать, это использовать общий элемент «». Затем мы добавляем значение «import» к атрибуту «rel». Используя «href», мы присоединяем URL-адрес HTML-файла, как мы привыкли, когда речь идет о таблицах стилей и скриптах.

Если импортируемый файл содержит дополнительные элементы «стиль» или «сценарий», они также будут импортированы. Неважно, размечены ли эти элементы в заголовке или в теле документа. Одним из вариантов использования импорта HTML5 может быть сбор всех таблиц стилей и сценариев, необходимых в данном проекте, и добавление их в один HTML-файл, который затем импортируется во все остальные файлы проекта. Это значительно упрощает обслуживание больших проектов.

Хотя импортированный документ содержит таблицы стилей, они будут применены напрямую. Ранее определенные таблицы стилей родительского документа будут перезаписаны.Чтобы этого не произошло, позаботьтесь о положении ссылки импорта в родительском документе. То же самое верно и для JavaScripts. Даже внешние элементы импортированного документа будут загружены в родительский документ.

Доступ к содержимому файла импорта

Другое содержимое из импортированного документа будет загружено, но не отображено. Все тексты, изображения и другие медиафайлы не будут видны, поскольку они не являются частью дерева DOM родительского документа. Однако вы по-прежнему можете получить к ним доступ через JavaScript.

В нашем примере предполагается, что первый элемент «ссылка» загружает HTML-файл. Используя свойство JavaScript «import», мы записываем полную древовидную структуру импортированного файла в переменную. Оттуда мы можем получить доступ к отдельным узлам через JavaScript.

Отсюда мы можем получить доступ ко всем узлам и прочитать их, используя распространенные методы JavaScript, такие как «getElementsByTagName()». Теперь мы можем удобно добавлять их в дерево DOM родительского документа. В более радикальном подходе мы могли бы также полностью заменить элемент «body» содержимым импортированного файла.

В нашем примере содержимое элемента body заменяется с помощью функции replaceChild(). Чтобы гарантировать, что замена не начнется до загрузки всех элементов, функция привязана к прослушивателю событий, добавленному с помощью «addEventListener()».

Поддержка браузера

На момент написания этой статьи только Chrome поддерживает импорт HTML5. Также вы должны включить функциональность вручную. Вызовите «chrome://flags» из адресной строки, что даст вам доступ к экспериментальным функциям. Найдите «Активировать импорт HTML» и активируйте его. После нового запуска Chrome HTML5 Imports будет доступен.

Используйте следующую функцию, чтобы проверить, поддерживает ли данный браузер импорт HTML5.

В старых браузерах можно использовать полифилл, который эмулирует импорт HTML5 в неподдерживаемых браузерах. Таким образом, в современных веб-проектах нет необходимости обходиться без импорта HTML5.

Читайте также: