HTML Imports

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

Оглавление:
  1. Повторное использование
  2. Импорт заголовка страницы
  3. Импортировать содержание
  4. Доступ к содержанию
  5. Импорт с доступом
  6. Поддержка
  7. Заключение

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

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

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

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

К началу

Повторное использование

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

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

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

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

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

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

Успешное выполнение импорта или произошла ошибка.

<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.

<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.

Доступ к содержанию

Получить доступ к уже импортированному содержимому.

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>

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

<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(...)).

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

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

Поддержка

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

Таблица поддержки браузерами: “HTML Imports”

Заключение

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

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