Импорт файлов в HTML
HTML импорт является одним из способов включить внешний HTML-документ и его веб-компоненты на странице без соответствующего AJAX запроса или загрузки IFRAME. Ввиду этой возможности, импорт HTML может послужить ускорению времени загрузки страницы, открыть новые возможности для повторного использования кода, а также улучшить интеграцию некоторых популярных сервисов, таких как Google Maps.
На момент написания статьи, технология импорта HTML является рабочим проектом W3C, а это значит, что она ещё не является веб-стандартом и пока не поддерживается во всех браузерах. Однако, HTML импорт можно уже сейчас использовать через Polymer.
HTML импорт как инструмент для повторного использования и агрегирования
Разработчики программного обеспечения, в том числе и веб-разработчики, стараются не дублировать код, а скорее распределять его по моделям, объектам, функциям. Благодаря разработчикам Дэйву Томасу и Эндрю Ханту, этот подход обычно называют DRY-разработкой или DRY-программированием, что значит в переводе с английского «не повторяй себя».
В некотором смысле, HTML импорт поддерживает развитие DRY. Вот пример — представьте, что у вас есть три сообщения, которые повторяются на нескольких веб-страницах. Вместо того чтобы копировать и вставлять или перепечатывать эти сообщения для каждой страницы или проекта, они могут быть включены с помощью HTML импорта.
Для примера возьмём HTML-файл с названием messages.html:
Success
Whatever you just did worked.
Failure
What a disappointment.
You are amazing.
Для повторного использования контента из messages.html, для начала включите документ через HTML импорт. Это осуществляется добавлением тега с атрибутом rel, равным «import» и атрибутом href, принимающим значение messages.html:
Мы можем написать небольшой отрывок, используя JavaScript, который обращается к документу messages.html и загружает сообщения “success” на странице. Каждое из последующих сообщений (или все вместе) также могут быть загружены аналогичным образом, в зависимости от того, как вам хотелось бы использовать их. Вот код:
var htmlImport = document.querySelector('link[rel="import"]'); var htmlDoc = htmlImport.import; var htmlMessage = htmlDoc.querySelector('.message-success'); document.body.appendChild(htmlMessage.cloneNode(true));
Данный код выполняет следующие задачи:
- Выбирает элемент link
- Импортирует файл
- Извлекает импортированный DOM
- Вставляет содержимое на страницу
Вот таким образом, сообщение “success” теперь включено на странице, подобно тому, как это работает через AJAX запрос.
Этот пример, конечно, крайне упрощён. Если бы содержание в messages.html было значительно сложнее, например, в несколько сотен строк HTML, JavaScript и CSS, то наш код импорта выглядел бы чуть сложнее.
В качестве второго примера рассмотрим, как языки программирования часто используются для загрузки повторно-используемого контента. В приведённом ниже примере из файла single.php появляется выбор окна приветствия для WordPress:
Обратите внимание, что есть несколько мест, в данном примере когда для single.php, были задействованы внешние ресурсы, в том числе, чтобы получить заголовок страницы, загрузить шаблон, окно навигации, сайдбар и нижнюю строку.
Аналогично тому, как скрипт PHP обращается к внешнему ресурсу, HTML импорт может быть использован для добавления содержимого. Эта аналогия может стать яснее, если учесть, что HTML импорт являются частью проекта HTML Web Components draft.
Допустим, что веб-компоненты имеют четыре составляющих блока. Эрик Байдельман, который работает в коммуникации с разработчиками в Google, а также представлял веб-компоненты в Googio I / O в 2013 и 2014 годах, описал их так:
- Shadow DOM (теневой DOM): работа с DOM и стилями;
- HTML Templates (HTML шаблоны): DOM фрагменты, для обеспечения базовой структуры кода;
- Custom Elements (пользовательские элементы) — собственные HTMLэлементы;
- HTML Imports (HTML импорт) – позволяют объединять веб-компоненты и повторно их использовать.
Учитывая всё вышеперечисленное, теперь вы можете себе представить, как можно использовать HTML импорт для улучшения загрузки различных компонентов HTML-страницы. К примеру данную технику можно применить в следующих случаях.
- Оплата через PayPal – используйте тег , и вы можете добавить безопасную возможность оплаты на любую страницу.
- Форма для E-mail подписки — используя HTML импорт, добавление формы подписки может быть также просто, как импортирование внешнего HTML документа и добавления тега .
- Карты Google — часто используемый пример импорта HTML, вставляем пользовательский элемент . Конечно, это сработает, только после того как будет загружен документ, определяющий специальный тег.
Третий пример показывает то, как HTML импорт может помочь разработчикам, более эффективно загрузить некоторые фреймворки или другие связки HTML.
В данном примере, загружаем Bootstrap и его многочисленные файлы:
В bootstrap.html подключаем нужные файлы, как бы мы это сделали в разделе :
Браузерная поддержка
Как уже упоминалось выше, в настоящее время существует достаточно мало браузеров поддерживающих HTML импорт. Исключения — Chrome 36+, Chrome 37+ для Android и Opera 23+0.
Также существуют полизаполнения, которые делают эту функцию доступной практически в любом браузере. Самым надёжным является вышеупомянутый проект Polymer.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/introduction-html-imports-tutorial/
Перевел: Станислав Протасевич
Урок создан: 30 Сентября 2014
Просмотров: 24930
Правила перепечатки
5 последних уроков рубрики «HTML и DHTML»
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
Как импортировать html файл в другой html файл c помощью JS/jQuery?
Как импортировать html файл в другой html файл c помощью JS/jQuery? Мне нужно избежать дублирования кода.
Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 2 сен 2020 в 14:33
user405273 user405273
Что такое «jQwery»?
2 сен 2020 в 15:05
– user405273
2 сен 2020 в 15:34
А. jQuery, может?
2 сен 2020 в 15:39
Да, опечатка. Я не пойму, зачем задавать такой вопрос?
– user405273
2 сен 2020 в 16:13
Чокнитесь со своими фреймворками скоро. Банальные задачи решить не можете без сторонних библиотек.
4 сен 2020 в 15:43
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Существует огромное количество способов включить один HTML в другой.
Способы композиции можно разделить на основные типы по месту/времени отработки:
- во время публикации (генератор статических сайтов, например Jekyll / GitHub Pages)
- на сервере, при обработке запроса HTML (SSI
- на клиенте (далее рассматривается она)
Если вам есть дело до SEO, то лучше проконсультироваться по поводу применимости композиции на клиенте.
Вариант с React-компонентом: если включается не документ с текстом, а интерактивный элемент (например калькулятор или корзинка), то его лучше не делать HTML-ем.
Вариант с jQuery с дополнительными запросом: $(«#content»).load(«menu.html»)
Вариант без библиотек с дополнительными запросом:
function include(selector,address) < fetch(address).then(resp =>resp.text()) .then(data => < document.querySelector(selector).innerHTML = data >) > Вариант с js-bundler (например, в webpack loader): HTML при сборке (во время публикации) преобразуется в js-строку в составе бандла, который подгружается целиком.
Вариант с «Web Components»: в этом случае включаемый HTML больше изолирован.
Существует также множество вариаций этих и других способов.
Что такое 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 страница с базовым импортом:
What are HTML imports and how do they work Hello from Designmodo
Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.
Внутри intro.html
Что же внутри импортированной страницы?
We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.
Вставка импортированного HTML
Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’
В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.
What are HTML imports and how do they work Hello from Designmodo
Переходим на следующий уровень
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
внутри элемента. Хорошо то, что scoped стили действуют только внутри элемента, в котором они заданы, а не во всем документе. Посмотрим, как атрибут scoped может помочь при работе с импортированными HTML-файлами.
Добавим h1 в импортированный документ, чтобы увидеть разницу между стилями импортированного файла и стилями index.html. Потом добавим стиль элементам импортированного HTML документа. Как видите находится внутри импортированной разметки, а не в head теге. Благодаря scoped, стили применятся только к h1 внутри импортированной разметки.
h1 < color: red; >p About us We're an awesome blog about web design
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.
Это немного похоже на Bootstrap
Bootstrap, это набор отдельных файлов, как bootstrap.css, boostrap.js и тд. Для плагинов, используется jQuery; Bootstrap предоставляет примеры верстки. Он очень гибок и прост в использовании. Суть Bootstrap в том, что вы можете использовать только необходимые для вашего проекта файлы. Большинство людей загружают все файлы сразу, и это тоже нормально. Идея HTML импорта та же, вы подключаете файлы по мере надобности. Эта логика становится популярной, из-за ускорения загрузки и упрощения организации.
Заключение
Благодаря HTML импорту, вы можете выносить HTML, как и CSS или JavaScript, в отдельные файлы. Это, на самом деле, очень круто. Включение HTML-файлов друг в друга не было простым, до появления HTML импорта. Теперь мы можем создавать повторно-используемый контент, подключаемый одной строкой кода. Это очень мощная вещь — и это круто!
Самые простые способы обработки включений HTML в HTML
От автора: для меня крайне удивительно, что никогда не было возможности включения HTML в другие HTML-файлы. Похоже, на горизонте нет ничего, что могло бы решить эту проблему. Я говорю о прямом включении, взять кусок HTML и вставить его прямо в другой.
Например, сценарий использования для большей части всего Интернета, включение заголовка и футера для всех страниц:
Это не реально, кстати. Я просто хотел бы, чтобы вы поняли, о чем речь.
Люди искали другие языки, чтобы решить эту проблему. В некотором смысле, это предварительная обработка HTML. Задолго до того, как мы обрабатывали CSS, мы использовали инструменты для манипулирования HTML. И мы до сих пор делаем это, потому что идея включений полезна практически для любого веб-сайта в мире.
Использовать PHP
Можете ли вы использовать вместо этого PHP?
Это выполнит включение на уровне сервера, и запрос будет выполнен на уровне файловой системы на сервере, поэтому это должно быть намного быстрее, чем решение на стороне клиента.
Использовать Gulp
Что может быть еще быстрее, чем на стороне сервера? Если включение предварительно обрабатывается еще до того, как оно будет на сервере. У Gulp есть множество процессоров, которые могут это делать. Одним из них является gulp-file-include. Это будет выглядеть так:
@ @ include ( ‘./header.html’ )
@ @ include ( ‘./footer.html’ )
И вы бы обработали это так:
JavaScript
var fileinclude = require ( ‘gulp-file-include’ ) ,
gulp = require ( ‘gulp’ ) ;
gulp . task ( ‘fileinclude’ , function ( ) <
gulp . src ( [ 'index.html' ] )
. pipe ( fileinclude ( <
basepath : '@file'
. pipe ( gulp . dest ( './' ) ) ;
Похоже, что этот конкретный плагин имеет необычные функции, в которых вы можете передавать переменные во включения, что позволяет создавать небольшие компоненты, управляемые данными.
Использовать Grunt
Это то, что делает плагин grunt-bake. Вы настраиваете Grunt для обработки HTML:
JavaScript
grunt . initConfig ( <
your_target : <
"dist/index.html" : "app/index.html" ,
Тогда HTML может использовать этот специальный синтаксис для включений:
Использовать Handlebars
У Handlebars есть партиалы. Вы регистрируете их:
JavaScript
Handlebars . registerPartial ( ‘myPartial’ , ‘<>‘ )И после этого используете:
Есть также причудливые функции, которые позволяют оценивать и передавать данные. Вам все еще понадобится процессор, чтобы запустить их, вероятно, что-то вроде gulp-handlebars. Говоря о языках шаблонов, которые используют фигурные скобки … Mustache тоже имеет их.
Использовать Pug
Pug — это препроцессор HTML с совершенно новым синтаксисом для HTML, который немного более лаконичен. Хотя он поддерживает включения.
include . / header . html »
include ./footer.html»
Затем вы запускаете это с чем-то вроде gulp-pug.
Использовать Nunjucks
Я люблю Nunjucks! Nunjucks имеет включения. Мы бы сделали это так:
Если вы поместите это в файл с именем index.njk, то можете обработать его с помощью простого скрипта Node в index.html следующим образом:
JavaScript
const nunjucks = require ( «nunjucks» ) ;
const fs = require ( «fs» ) ;
fs . writeFile ( «index.html» , nunjucks . render ( «index.njk» ) , function ( err , data ) <
if ( err ) console . log ( err ) ;
console . log ( "Compiled the Nunjucks, captain." ) ;
Или обработайте это чем-то вроде gulp-nunjucks. 11ty имеет встроенный Nunjucks, как и большинство других, упомянутых до сих пор. Это может подойти вам, если вы на самом деле создаете маленький сайт.
Использовать Ajax
Предположим, у вас есть …
Вы можете получить содержимое для заголовка и футера из соответствующих файлов и вывести содержимое.
JavaScript
fetch ( «./header.html» )
. then ( response = > <
return response . text ( )
. then ( data = > <
document . querySelector ( "header" ) . innerHTML = data ;
fetch ( "./footer.html" )
. then ( response = > <
return response . text ( )
. then ( data = > <
document . querySelector ( "footer" ) . innerHTML = data ;
Говоря о 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, супер-пупер общий веб-сервер, он может выполнять включения. Вы можете сделать это так:
Но вам нужна правильная конфигурация Apache, чтобы все было обработано правильно. Я старался изо всех сил, чтобы создать рабочую демо-версию, но мне не повезло. Я попытался использовать .htaccessв папке на сервере Apache и переключился на то, что мне показалось правильным:
Options + Includes
AddType text / html . html
AddOutputFilter INCLUDES . html
Я уверен, что есть какой-то способ заставить это работать, и если вы это сделаете, то это здорово, что ему не нужно других зависимостей.
Использовать CodeKit
Это только для Mac, но в CodeKit есть специальный язык, называемый Kit, суть 90% того, что он обрабатывает, это включения HTML. Он использует специальные комментарии HTML:
Использовать Dreamweaver
Lol, шутка. Но это действительно работает.
Черт побери. Это довольно много способов, не так ли?
Как я сказал в начале, меня очень удивительно, что сам HTML не обращался к этому напрямую. Не то чтобы я думал, что для производительности было бы хорошей идеей иметь операторы , запускающие сетевые запросы по всему коду, но это есть в других платформах. Использование импорта ES6 напрямую без упаковки тоже не всегда хорошая идея, но у нас это есть. Использование @import в CSS не всегда хорошая идея, но она у нас есть. Если бы у платформы был собственный синтаксис, возможно, другие инструменты смогли бы использовать это, подобно тому, как упаковщики JavaScript поддерживают формат импорта ES6.
Автор: Chris Coyier
Редакция: Команда webformyself.