HTML импорт

HTML imports — это способ без ограничений подключить документ HTML к веб-странице. Если нужно, спецификация HTML imports может также импортировать только CSS, JavaScript или всё что содержит .html. Другими словами, это замечательный инструмент для подключения содержимого страницы HTML включая CSS и JavaScript.

Оглавление:
  1. Способы подключения кода HTML
  2. Повторное использование кода с помощью HTML imports
  3. Приступая к работе
  4. Импорт заголовка страницы
  5. Импортировать содержание
  6. import
  7. Полный пример:
  8. Импорт с доступом на странице
  9. Поддержка браузерами HTML imports
  10. Заключение

Способы подключения кода HTML

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

Вот варианты подключения HTML:

  1. iframe — вариант верный, надежный, но много весит и содержимое iframe полностью находится в отдельном контексте. iframe создает дополнительные проблемы (подгонять размер фрейма для содержимого, в общем неприятный скрипт).
  2. AJAX — хорошая вещь но для подключения HTML нужен JavaScript. Что не совсем правильно.
  3. CrazyHacks™ — встроенный в строках, скрытый в комментариях (например, <script type="text/html">).

Новые возможности повторного использования кода HTML улучшает время загрузки страницы и облегчает интеграцию с некоторыми популярными сервисами, такими как Google Maps.

к меню ↑

Повторное использование кода с помощью HTML imports

Повторное использование кода HTML
Импортировать код HTML на веб-страницу сайта
к меню ↑

Приступая к работе

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

Для того что бы подключить HTML с другой страницы с помощью HTML imports, нужно указать путь к содержимому HTML.

<head>
  <link rel="import" href="путь/page.html">
</head>

Для импорта содержания из другого домена требуется поддержка CORS:

<!-- Для импорта содержания из другого домена требуется поддержка CORS -->
<link rel="import" href="http://site.ru/page.html">

Не большой код JavaScript сообщит о успешно выполненном импорте или произошла ошибка импорта.

<script async>
function handleLoad(e) { console.log('Импорт выполнен успешно: ' + e.target.href);
}
function handleError(e) { console.log('Ошибка импорта: ' + e.target.href);
}
</script>

<link rel="import" href="page.html"
onload="handleLoad(event)" onerror="handleError(event)">

Обратите внимание на обработчик событий, он определяется до импорта страницы. Как только браузер пытается загрузить импорт, он ищет тег, если тега нет, будет ошибка.

Создать импорт динамически:

var link = document . createElement ( 'link' );
link . rel = 'import' ;
link . href = 'page.html'
link . onload = function ( e ) {...};
link . onerror = function ( e ) {...};
document . head . appendChild ( link );
к меню ↑

Импорт заголовка страницы

Импортировать заголовок страницы — где стили и скрипты с помощью HTML imports, не составляет труда. Для примера возьмём страницу Bootstrap и импортируем заголовок кодом ниже:

<head>
  <link rel="import" href="bootstrap.html">
</head>

Браузер пользователя просто загрузит ссылку на странице bootstrap.html, функция HTML imports импортирует содержимое заголовка .html на вашу веб-страницу.

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- макет -->
<template>
...
</template>
к меню ↑

Импортировать содержание

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

Вы сможете манипулировать импортированным содержанием, используя стандартный DOM API.

к меню ↑

import

Чтобы получить доступ к уже импортированному содержимому, нужно добавить свойство .import:

var content = document.querySelector('link[rel="import"]').import;

link.import принемает null при следующих условиях:

  • Браузер не поддерживает HTML import.
  • В link нет rel="import".
  • В link не был добавлен в DOM.
  • В link был удален из DOM.
  • Ресурс не поддерживает CORS.
к меню ↑

Полный пример:

Допустим page.html содержит:

<div class="page">
<style scoped>
h3 {
color: green;
}
</style>
<h1>Страница</h1>
<p>Содержание</p>
</div>

<div class="theend">
<h2>Заключение</h2>
<p>Опубликовано в 2014 году</p>
</div>

HTML imports — может импортировать конкретную часть этого документа и клонировать его на веб-страницу кодом:

<head>
<link rel="import" href="page.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;

// DOM из документа page.html
var el = content.querySelector('.page');

document.body.appendChild(el.cloneNode(true));
</script>
</body>
к меню ↑

Импорт с доступом на странице

Импорт скриптов можно выполнить на главной странице, даже если основной документ доминирует.

Пример import.html добавляет стиль для главной страницы:

<link rel="stylesheet" href="http://www.site.ru/styles.css">
<link rel="stylesheet" href="http://www.site.ru/styles2.css">

<style>
/* Примечание: <style> в импорте применять к основному документу по умолчанию. То есть, теги в стиле не надо добавлять к основному документу. */
#somecontainer {
color: blue;
}
</style> ... <script>
// importDoc ссылается на этот импорт документов
var importDoc = document.currentScript.ownerDocument;

// mainDoc ссылки основного документа
var mainDoc = document;

// Получить первый stylesheet от этого импорта и клонировать его,
// добавляя его в документ.
var styles = importDoc.querySelector('link[rel="stylesheet"]'); mainDoc.head.appendChild(styles.cloneNode(true));
</script>

Смотрите, что здесь происходит. Скрипт внутри импортированной ссылки, импортированный документ (document.currentScript.ownerDocument) добавляет часть этого документа импортера на страницу (mainDoc.head.appendChild(...)).

Правила импорта JavaScript:

  • Импорт скрипта выполняется в контексте окна, которое содержит импортированный документ. Так window.document ссылается на главную страницу документа. Это имеет два полезных действия:
    • функции, определенные в импорте в конечном итоге в окне.
    • Вы не должны делать ничего, что бы добавить импорт <script> на главной странице. Опять же, скрипт выполняется.
  • Скрипты внутри обрабатываются по порядку. Это означает, что вы получите отсрочку, как поведение, сохраняя порядок сценария.
к меню ↑

Поддержка браузерами HTML imports

На момент написания этой статьи, технология HTML imports не является стандартом W3C для веб-разработки, и не поддерживается всеми браузерами. Но для для таких браузеров HTML imports можно безопасно использовать с помощью polymer.

к меню ↑

Заключение

HTML imports позволяет подключать внешние HTML/CSS/JS и объединяет их в одно целое. HTML imports сам по себе полезен, эта идея становится очень мощным инструментом в мире веб-компонентов. Разработчики могут  повторно использовать созданные компоненты, используя всего лишь <link rel="import">.

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