[Перевод] HTML-импорт — include для веба: часть 130.07.2014 02:03

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.От переводчикаНедавно я перевел статью по основам HTML Import. Я обещал, что если эта тема заинтересует хабра-сообщество, то переведу более подробную статью. Я решил разбить перевод на две одинаковые по размеру части, так как, по моему, на одну часть слишком много буков. Вторая часть выйдет спустя несколько дней после публикации этой части. Если, конечно, эта часть более-менее понравится хабра-сообществу.Для чего нужен HTML-импорт? Давайте поговорим о том, как мы загружаем различные ресурсы. JavaScript мы загружаем при помощи …

События load/error После загрузки импорта запускает событие load, а в случае ошибки (например 404), событие error.Импорт всегда загружается сразу же, в порядке нахождения тега . Отловить события загрузки можно при помощи атрибутов onload/onerror:

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка 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 Для получения содержимого импорта используется свойство .import элемента link: var content = document.querySelector ('link[rel=«import»]').import; link.import равен null при следующих обстоятельствах: Браузер не поддерживает импорт. У элемента нет атрибута rel=«import». Объект не добавлен в DOM. Или был удален из DOM Ресурс не поддерживает CORS. Полный пример Допустим у нас есть страница warnings.html:

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

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

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

…

Итак, что здесь происходит? При помощи document.currentScript.ownerDocument мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (mainDoc.head.appendChild (…)). Это конечно бесполезный код, но нам он нужен, чтобы понять, что мы можем обращаться как к главному, так и ко внутреннему корню DOM.Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

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

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