каким образом можно вставить один html документ в другой

Введение в HTML импорты

Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.

Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.

HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.

Предлагаю вам ознакомиться с видео по данной теме.

Использование HTML импортов

Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
component.html

Порядок исполнения

Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.

Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.

Итак, как же работают импорты?

За рамками происходящего

На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать в http://example.com/ страницу http://webcomponents.org/.

Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.

Объекты window и document в импортируемых файлах

Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.

Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.

Внесем небольшие изменения в наши файлы.
index.html

Вопросы производительности

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

Зависимости

Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:

Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html

Данная проблема крайне легко решается в импортах.

К счастью, нам на помощь идет инструмент под названием «Vulcanize».

Объединение сетевых запросов

Для объединения файлов index.html используем следующий код:

Прочитать больше о данном инструменте можно здесь.

Сочетание импортов с Template, Shadow DOM и Custom Elements

Поддерживаемые браузеры

HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».

Источник

Что такое HTML импорт и как это работает?

Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других HTML страниц.

Введение в HTML импорт

HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)

Обходные пути

Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.

Начнём

Базовый синтаксис

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

Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.

Базовый пример

Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:

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

Внутри intro.html

Что же внутри импортированной страницы?

Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.

Вставка импортированного HTML

Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’

В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.

Переходим на следующий уровень

Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега

Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.

Источник

Самые простые способы интеграции HTML

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

Но приведенный выше код не работает.

Многие решают данную проблему с помощью других языков программирования.

Используем PHP

Может, стоит применять PHP?

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

Используем Gulp

Посмотрите код ниже:

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

Используем Grunt

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

Используем Handlebars

У Handlebars есть шаблоны (partials). Их необходимо зарегистрировать:

Теперь их можно использовать:

Используем Pug

Запустите код, приведенный выше, с помощью gulp-pug.

Используем Nunjucks

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

Используем Ajax

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

Можно вывести контент для шапки и подвала из соответствующих шаблонов.

Если вы создаете сайт, используя фреймворк JavaScript, то применяйте компоненты.

Используем iframes

Используйте код, приведенный ниже:

Обратите внимание, что контент в iframes использует разные DOM. Поэтому код выглядит немного странно.

Но можно заставить iframe вывести свое содержимое на родительской странице, а затем удалить «самого себя».

Используем Jekyll

Используем Sergey

Есть еще один генератор статических сайтов (SSG), который стоит упомянуть. В Sergey есть формат стиля веб-компонентов:

Используем Apache SSI

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

Используем CodeKit

Заключение

Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

Источник

Самые простые способы обработки включений HTML в HTML

Дата публикации: 2019-05-22

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

Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:

Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Использовать PHP

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

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

Использовать Gulp

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

И вы бы обработали это так:

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

Использовать Grunt

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

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

Использовать Handlebars

У Handlebars есть партиалы. Вы регистрируете их:

И после этого используете:

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

Использовать Pug

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

Затем вы запускаете это с чем-то вроде gulp-pug.

Использовать Nunjucks

Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.

Использовать Ajax

Предположим, у вас есть …

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

Говоря о JavaScript … Если вы создаете сайт с использованием практически любого JavaScript-фреймворка, построение с помощью компонентов является одной из основных идей, и разбивка на части, которые вы хотите включить в другие файлы, не должна стать проблемой. Что-то вроде import Header from «./header.js»; и является территорией React.

Использовать фреймы

Вы могли бы сделать это:

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

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

Использовать Jekyll

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

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

Использовать Sergey

Хорошо, я назову еще один SSG, потому что он довольно новый и очень компактный. В Sergey есть формат стиля веб-компонентов:

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

Использовать Apache SSI

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

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

Использовать CodeKit

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

Использовать Dreamweaver

Lol, шутка. Но это действительно работает.

Черт побери. Это довольно много способов, не так ли?

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Включить другой HTML-файл в HTML-файл

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

28 ответов

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

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

мое решение похоже на решение Лоло выше. Однако я вставляю HTML-код через документ JavaScript.напишите вместо использования jQuery:

a.html:

причина для меня против использования jQuery заключается в том, что jQuery.js имеет размер

90kb, и я хочу сохранить объем данных для загрузки как можно меньше.

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

или просто используйте следующий удобный скрипт bash, опубликованный как Gist на Github, который автоматизирует всю необходимую работу, конвертируя b.html to b.js : https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

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

расширение ответа Лоло сверху, вот немного больше автоматизации, если вам нужно включить много файлов:

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

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

например:

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

выше будет принимать содержимое /path/to/include.html и заменить div С ним.

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

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

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

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

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

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

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

вставить содержимое файла:

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

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

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

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

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

ответ Atharis (первый!) было слишком убедительно! Очень Хорошо!

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

таким образом, это становится чем-то вроде этого:

в a.html код теперь выглядит так:

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

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

Я пишу приведенный ниже код, в моем решении вы можете получить доступ к включенному контенту в :

(ключ загрузки содержания синхронно.)

включить.inc:

в w3.js включает такие работы:

html5rocks.com имеет очень хороший учебник по этому вопросу, и это может быть немного поздно, но я сам не знал, что это существует. w3schools также имеет способ сделать это, используя свою новую библиотеку под названием w3.js. Дело в том, что для этого требуется использование веб-сервера и объекта HTTPRequest. Вы не можете загрузить их локально и протестировать на своем компьютере. То, что вы можете сделать, это использовать polyfills, предоставленные по ссылке html5rocks вверху, или следовать их учебнику. С маленький JS magic, вы можете сделать что-то вроде этого:

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

обновление: это вызовет ошибку, говорящую о том, что локальный импорт был заблокирован политикой CORS. Может потребоваться доступ к deep web, чтобы иметь возможность использовать это из-за свойств deep web. (Не имея в виду практического применения)

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

просто поместите в свой a.html

Это open-source и может дать идея (я надеюсь)

вы можете сделать это с помощью библиотеки jQuery JavaScript следующим образом:

обратите внимание: banner.html должен находиться под тем же доменом, что и другие ваши страницы, иначе ваши веб-страницы откажутся от из-за Совместное Использование Ресурсов Cross-Origin политика.

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

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

вы также можете попробовать Google Полимер

на основе ответа https://stackoverflow.com/a/31837264/4360308 Я реализовал эту функциональность с Nodejs (+express + cheerio) следующим образом:

HTML (index.html)

вы можете легко добавить больше поведения после того же дизайна

Я пришел к этой теме, ища что-то похожее, но немного отличающееся от проблемы, поставленной Лоло. Я хотел создать HTML-страницу, содержащую алфавитное меню ссылок на другие страницы, и каждая из других страниц может существовать или не существовать, а порядок их создания может не быть алфавитным (или даже числовым). Кроме того, как и Тафкадасох, я не хотел раздувать веб-страницу с помощью jQuery. После исследования проблемы и экспериментов в течение нескольких часов, вот что сработало для меня, с соответствующими замечаниями добавил:

Вы можете включить нижний колонтитул.tpl в главном файле, например:

кроме того, вы также можете передать параметр в свой dashborard.ТПЛ.

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

вот простой PHP-скрипт, который вы можете использовать для включения фрагмента HTML на любой веб-странице с поддержкой PHP:

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

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

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

Источник