Link rel import html

HTML-импорт — include для веба: часть 1

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

Недавно я перевел статью по основам HTML Import. Я обещал, что если эта тема заинтересует хабра-сообщество, то переведу более подробную статью. Я решил разбить перевод на две одинаковые по размеру части, так как, по моему, на одну часть слишком много буков. Вторая часть выйдет спустя несколько дней после публикации этой части. Если, конечно, эта часть более-менее понравится хабра-сообществу.

Для чего нужен HTML-импорт?

Начало работы

В наборе стандартов Web Components есть стандарт HTML Imports, который позволяет подключение HTML-документов друг в друга. В подключаемых HTML-документах разрешается Javascript и CSS, словом, все что .html обычно содержит. Это замечательный инструмент для загрузки пакетов HTML/CSS/JS кода.

Основы

Указанный URL, это расположение импорта(import location). Чтобы использовать импорт с другого домена, его расположение должно позволять междоменное разделение ресурсов(CORS):

Примечание: браузеры игнорируют повторные запросы на один и тот же URL. Это значит, что из одного адреса будет выполнена только одна загрузка сколько бы ни было подключений на странице

Проверка на поддержку браузером

function supportsImports() < return 'import' in document.createElement('link'); >if (supportsImports()) < // Good to go! >else < // Use other libraries/require systems to load files. >

Браузерная поддержка пока на ранней стадии(прим. переводчика: оригинал статьи опубликован 11 ноября 2013, теперь, наверное, другая ситуация с поддержкой). Chrome 31 первый браузер поддерживающий HTML-импорт. Chrome 36 обновлен до последней спецификации этой фичи. Вы можете включить поддержку импорта, отметив флаг «Включить экспериментальные функции веб-платформы» по адресу

в Chrome Canary. Для других браузеров это пока не работает.

Примечание: Включение экспериментальных функций позволит использовать и другие полезные фичи веб-компонентов

Бандлинг ресурсов

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

Вы сможете экспортировать целые пакеты веб содержимого всего одной линкой.

Bootstrap это хороший пример того, как мог бы пригодиться импорт компонентов. Бутстрап состоит из различных файлов (bootstrap.css, bootstrap.js и др.), использует JQuery (как импортируемый компонент), а в результате выдает инструменты для верстки. Разработчикам нравится возможность подключать те или иные модули, по мере необходимости. Но обычно мы идем простым путем, подключая все модули бутстрапа сразу.

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

Нужно всего лишь добавить один линк импорта. Больше не нужно подключать кучу файлов, вместо этого весь Bootstrap завернут в файл bootstrap.html:

События load/error

Импорт всегда загружается сразу же, в порядке нахождения тега

 function handleLoad(e) < console.log('Loaded import: ' + e.target.href); >function handleError(e)

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.

Вы, также, можете динамически создавать импорт:

var link = document.createElement('link'); link.rel = 'import'; link.href = 'file.html' link.onload = function(e) ; link.onerror = function(e) ; document.head.appendChild(link); 

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

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

Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!

link.import

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

• Браузер не поддерживает импорт.
• У элемента нет атрибута rel=»import» .
  Объект не добавлен в DOM.
  Или был удален из DOM
  Ресурс не поддерживает CORS.

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

Допустим у нас есть страница warnings.html :

 
 h3 
Warning!
 
This page is under construction
 
 
Heads up!
 
This content may be out of date
 
 

Вы можете использовать только необходимую вам часть импортированной страницы:

  .   

Скрипты в импорте

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

Пример — import.html добавляет один из своих стилей главному документу

   /* Примечание: Внутренние стили, по умолчанию применяются к импортирующему документу. Их не нужно явно добавлять в главную страницу. */ #somecontainer .  

document.currentScript.ownerDocument

мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (

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

Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

• Код импорта выполняется в контексте содержащего его документа. Из этого исходят две удобные вещи:
  • Функции объявленные в импорте содержатся в главном объекте window .
  • Вам не нужно делать действий вроде добавления в главный документ тегов

  Источник

  Импорты

  Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

  Новая спецификация «HTML Imports» описывает, как вставить один документ в другой при помощи HTML-тега .

  Зачем?

  Мы ведь и так можем вставлять документ в документ, при помощи , зачем нужен ещё какой-то импорт? Что не так с iframe ?

  …С iframe всё так. Однако, по своему смыслу iframe – это отдельный документ.

  • Для iframe создаётся полностью своё окружение, у него свой объект window и свои переменные.
  • Если iframe загружен с другого домена, то взаимодействие с ним возможно только через postMessage .

  Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.

  А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом – другой документ.

  Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом – мы должны иметь возможность это сделать без «плясок с бубном».

  Иначе говоря, – это аналог , но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.

  Пример вставки

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

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

  Файл, загруженный через , обрабатывается, выполняются скрипты, строится DOM документа, но не показывается, а записывается в свойство link.import .

  Мы сами решаем, где и когда его вставить.

  В примере ниже подключает документ timer.html и, после его загрузки, вызывает функцию show . Эта функция через link.import.querySelector(‘time’) выбирает интересующую часть подгружённого документа и вставляет её в текущий:

  В файле timer.html находится элемент и скрипт, который его «оживляет»:

      var localDocument = document.currentScript.ownerDocument; var timer = localDocument.getElementById('timer'); var timerId = setInterval(function() < timer.innerHTML++; >, 1000);  

  Источник