menu
img
  • Главная
  • Проекты
  • Блог
  • Бриф-анкета
  • Контакты
  • eng
  • укр
  • fra
img

HTML Imports

Новая спецификация «HTML Imports» описывает, как вставить один документ в другой с помощью HTML-тега <link rel = "import">.

Но для чего это, если уже и так можем вставлять документ в документ, с помощью <iframe>. Зачем нужен еще какой-то импорт и что не так с iframe?

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

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

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

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

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

 

Синтаксис

<link rel="import" href="http://site.com/document.html">

В отличие от <iframe> тег <link rel="import"> может быть в любом месте документа, даже в <head>. При вставке через <iframe> документ показывается внутри фрейма. В случае с <link rel="import"> это не так, по умолчанию документ вообще не показывается.

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

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

<!DOCTYPE HTML>
<html>
<body>
 <script>
   function show() {
     var time = link.import.querySelector('time')
     document.body.appendChild(time);
   };
 </script>
 <link rel="import" id="link" onload="show()" href="timer.html">
</body>
</html>

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


<!DOCTYPE HTML>
<html>
<body>
 <time id="timer">0</time>
 <script>
   var localDocument = document.currentScript.ownerDocument;
   var timer = localDocument.getElementById('timer');
   var timerId = setInterval(function() {
     timer.innerHTML++;
   }, 1000);
 </script>
</body>
</html>

 

Важные детали

После загрузки все скрипты в подключенном timer.html выполняются в контексте основной страницы, так что timer и другие переменные станут глобальными переменными страницы.

Переменная document – это документ основной страницы. Для доступа к импортированному, то есть текущему документу изнутри timer.html его можно получить как document.currentScript.ownerDocument.

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

В примере выше содержимым импорта управлял основной документ, но timer.html мог бы и показать сам себя вызовом document.body.appendChild(timer) или вызвать функцию с внешнего документа, так как у них единая область видимости. Тогда не понадобился бы никакой onload.

Обратим внимание – стили импорта попадают в контекст страницы. В примере выше импорт добавил и стиль для #timer и сам элемент.

 

Веб-компоненты

Импорт задуман как часть платформы Web Components.

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

Пример:

<link rel = "import" href = "ui-tabs.html">

<link rel = "import" href = "ui-dialog.html">

<ui-tabs> ... </ ui-tabs>

 

<ui-dialog> ... </ ui-dialog>

 

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

Повторный импорт с тем же URL использует уже существующий документ.

Если файл libs.html импортирован два раза, то CSS и скрипты из него подключатся и выполнятся ровно один раз.

Это можно использовать, чтобы не подгружать одинаковые зависимости много раз. И сама страница и её импорты, и их подимпорты, и так далее, могут подключать libs.html без опасения лишний раз перезагрузить и выполнить скрипты.

Например:

Главный файл index.html подключает документы:

<link rel = "import" href = "ui-tabs.html">

<link rel = "import" href = "ui-dialog.html">

ui-tabs.html подключает libs.html:

<link rel = "import" href = "libs.html">

...template и код для табов...

ui-dialog.html также использует libs.html:

<link rel = "import" href = "libs.html">

...template и код для диалогов...

Файл libs.html при этом будет подключен только один раз. Это позволяет не бояться лишнего дублирования библиотек, используемых при описании множества компонент.

 

Итоги

Тег <link rel="import"> позволяет подключить любой документ к странице.

Скриптовое пространство и стили со страницей будут общие.

Документ DOM – отдельный, он доступен как link.import снаружи, а из внутреннего скрипта – через document.currentScript.ownerDocument. Можно без проблем переносить элементы из главного документа в импорт и наоборот.

Импорты могут содержать другие импорты.

 

Если какой-то URL импортируется повторно – подключается уже готовый документ, без повторного выполнения скриптов в нём. Это позволяет избежать дублирования при использовании одной библиотеки во множестве мест.

 

img Site of the Day AWWWARDS 2020 September 15 – 21 img Карантин - не повод скучать img Особенности и обновления Sketch
img
© 2015-2021 Web4U. Все права защищены
img