Импорты
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Новая спецификация «HTML Imports» описывает, как вставить один документ в другой при помощи HTML-тега <link rel="import"> .
Зачем?
Мы ведь и так можем вставлять документ в документ, при помощи <iframe> , зачем нужен ещё какой-то импорт? Что не так с iframe ?
…С iframe всё так. Однако, по своему смыслу iframe – это отдельный документ.
- Для iframe создаётся полностью своё окружение, у него свой объект window и свои переменные.
- Если iframe загружен с другого домена, то взаимодействие с ним возможно только через postMessage .
Это хорошо, когда нужно действительно в одной странице отобразить содержимое другой.
А что, если нужно встроить другой документ как естественную часть текущего? С единым скриптовым пространством, едиными стилями, но при этом – другой документ.
Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом – мы должны иметь возможность это сделать без «плясок с бубном».
Иначе говоря, <link rel="import"> – это аналог <script> , но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
Пример вставки
- В отличие от <iframe> тег <link rel="import"> может быть в любом месте документа, даже в <head> .
- При вставке через <iframe> документ показывается внутри фрейма. В случае с <link rel="import"> это не так, по умолчанию документ вообще не показывается.
HTML, загруженный через <link rel="import"> имеет отдельный DOM документа, но скрипты в нём выполняются в общем контексте страницы.
Введение в HTML импорты
Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.
Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.
HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.
Предлагаю вам ознакомиться с видео по данной теме.
Использование HTML импортов
Чтобы загрузить HTML файл, добавьте тэг link с import’ом в параметре rel и href, содержащий путь до нужного файла. К примеру, если вы хотите загрузить файл под названием component.html в index.html, то все должно выглядеть так:
index.html
Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
component.html
doctype, html, head, body необязательны. HTML импорты автомагически загрузят все указанные элементы, добавят их на страницу и запустят JavaScript, если имеется.
Порядок исполнения
Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.
Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.
Итак, как же работают импорты?
Скрипт внутри HTML импорта работает как обычный тэгscript с атрибутом defer. В примере ниже index.html запустит script1.js иscript2.js внутри component.html перед исполнением script3.js.
index.html
component.html
- Загружается component.html из index.html и ожидает исполнения;
- Загружается script1.js в component.html;
- Загружается script2.js в component.html после script1.js;
- Загружается script3.js в index.html после script2.js.
Заметьте, что добавление атрибута async в link[rel=»import»] расценивается как атрибут async в тэге script. Он не будет блокировать HTML. Это может потенциально улучшить производительность вашего проекта.
За рамками происходящего
На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать вhttp://example.com/ страницу http://webcomponents.org/.
Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.
Объекты window и document в импортируемых файлах
Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.
Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.
Используя написанный ранее код в качестве примера, заставим document в index.html и component.html ссылаться на document вindex.html.
Внесем небольшие изменения в наши файлы.
index.html
Для получения document из component.html дополните ваш код с document.currentScript.ownerDocument.
component.html
Если вы используете webcomponents.js, воспользуйтесь document._currentScript вместо document.currentScript. Нижнее подчеркивание в currentScript используется для поддержания браузеров, не способных работать с этим компонентом без использования сего знака.
component.html
Написав вот это в начале вашего скрипта, можно легко получить доступ к document из component.html, даже если браузер не поддерживает HTML импорты.
Вопросы производительности
Один из плюсов использования импортов — возможность самостоятельно распределить нагрузку страницы и порядок обработки импортируемых объектов. Но это еще и означает, что HTML код увеличится. Вообще, есть несколько пунктов для сравнения:
Зависимости
Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:
Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html
component1.html
component2.html
Данная проблема крайне легко решается в импортах.
В отличие от тэга script, объекты нашей статьи не загружают повторно один и тот же материал. Смотря на последний пример, достаточно обернуть тэг script HTML импортом, и данный ресурс не будет загружен дважды.
Но есть и другая проблема: теперь файлов для загрузки стало больше. Что делать, если таких будет не два, а гораздо больше?
К счастью, нам на помощь идет инструмент под названием «Vulcanize».
Объединение сетевых запросов
Vulcanize — инструмент объединения нескольких HTML файлов в один, с помощью чего число подключений к сети в целях загрузки необходимых документов сокращается. Вы можете установить его с помощью npm и использовать в командной строке. Также существуют аналоги для grunt и gulp, с помощью чего можно сделать «Vulcanize» частью вашего процесса сборки.
Для объединения файлов index.html используем следующий код:
При исполнении данной команды все зависимости index.html будут соединены в файле vulcanized.html.
Прочитать больше о данном инструменте можно здесь.
Сочетание импортов с Template, Shadow DOM и Custom Elements
Для тех, кто не знает о данных технологиях: С templates определение содержания пользовательского элемента может быть декларативным. С Shadow DOM styles, ID и classes элемента можно использовать немного иначе. С Custom Elements можно создать собственные HTML тэги. Неплохо, не так ли?
Объединение импортов с собственными веб-компонентами получит модульность и возможность многократного использования. Любой сможет их использовать, добавив лишь тэг link.
x-component.html
Обратите внимание, что объект document в x-component.html такой же, как и в index.html. Не нужно писать ничего сложного, все работает само и за вас.
Поддерживаемые браузеры
HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».
Чтобы проверить данный метод на совместимость с конкретным браузером, посетите chromestatus.com или caniuse.com. Для добавления возможности работы этой технологии в других браузерах, воспользуйтесь webcomponents.js (ранее platform.js).
Ресурсы
Итак, мы рассмотрели HTML импорты. Если вам хочется еще больше углубиться в эту тему, то можно заглянуть сюда:
5 полезных советов для загрузки HTML-файлов
Загрузка файлов на различных платформах — это типичная повседневная задача. Без неё трудно представить себе жизнь в современном мире, ведь все мы обмениваемся фотографиями в соцсетях или оставляем резюме на сайтах по поиску работы. И HTML является неотъемлемой частью этого процесса, предоставляя встроенную поддержку загрузки файлов с помощью JavaScript.
В этой статье мы рассмотрим пять различных способов загрузки HTML-файлов.
1. Простая загрузка файлов
Чтобы использовать функциональность файлового загрузчика, нужно в качестве типа входных данных указать file («Файл»). Рассмотрим пример:
Тип файла с входными данными позволяет пользователям нажатием кнопки загружать один или несколько файлов. После успешной загрузки файл API облегчает чтение файлового объекта с использованием JavaScript. Для этого нужно будет выбрать входные данные в JavaScript, а затем прослушать событие change («Событие изменения») файлового загрузчика. Рассмотрим следующий пример:
Посмотрите на вывод в консоли браузера. Обратите внимание, что массив fileList с файловым объектом содержит всю дополнительную информацию (метаданные) о загруженном файле.
/>Файловый объект в консоли.
Потренируйтесь в онлайн-редакторе CodePen с тем же примером:
Можно загрузить несколько файлов. Для этого во входных данных используется атрибут multiple . Посмотрите следующий пример:
Как и в первом примере, прочитаем файловый объект из консоли. Но теперь массив fileList внутри файлового объекта будет содержать несколько элементов, потому что было загружено несколько файлов:
Массив fileList в консоли.
Вот пример на Codepen, если захотите проверить:
При загрузке файла в объекте File содержатся некоторые метаданные (имя файла, размер, время последнего обновления, тип и т. д.). Это можно проверить в консоли, как мы уже делали выше. Наличие таких данных может быть полезно, если надо отобразить их на странице с помощью манипуляций на уровне объектной модели документа:
Эта информация может быть полезна для дальнейших валидаций и принятия решений.
4. Свойство «Accept»
Чтобы ввести ограничение на тип загружаемых файлов, используют атрибут accept , как в этом примере:
Здесь можно выбрать только файлы с расширением jpg и png .
5. Управление содержимым файла
После того, как файл загружен, неплохо бы показать его содержимое. Больше всего это относится к фото профиля или аватарке: чтобы не приводить пользователя в замешательство, нужно сразу после загрузки показать ему загруженное изображение. Или хотя бы сообщить, что файл загружен.
Для преобразования файла в двоичную строку используют объект FileReader . Затем добавляют слушатель событий load , чтобы при успешной загрузке файла получить двоичную строку. Посмотрите следующий пример:
Попробуйте загрузить изображение в этот пример на Codepen и посмотрите, что получится.
Загрузка файлов в HTML — очень полезная штука. Для задействования этого функционала не требуется никаких библиотек. Не стоит недооценивать мощь HTML со встроенной поддержкой загрузки файлов. Ведь есть и другие, ещё более полезные функции, которые он может предложить (в статье были рассмотрены лишь некоторые из них).