What are HTML imports and how do they work

Что такое 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 страница с базовым импортом:

      
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.

      
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-документ и его веб-компоненты на странице без соответствующего 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
Просмотров: 23957
Правила перепечатки

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. Проблема?.

Источник