HTML импорт

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

Способы подключения кода HTML

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

Вот варианты подключения HTML:

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

Новые возможности повторного использования кода HTML улучшает время загрузки страницы и облегчает интеграцию с некоторыми популярными сервисами, такими как Google Maps.

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

Повторное использование кода с помощью HTML imports

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

Приступая к работе

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

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



<head>
  <link rel="import" href=
http://pixelcom.crimea.ua/"путь/page.html">
</head>


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



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


Не большой код JavaScript сообщит о успешно выполненном импорте или произошла ошибка .

Вот код:



<script async>
  function handleLoad(e) { console.log('Импорт выполнен успешно: ' + e.target.href);
  }
  function handleError(e) { console.log('Ошибка импорта: ' + e.target.href);
  }
</script>

<link rel="import" href=
http://pixelcom.crimea.ua/"page.html"
  onload="handleLoad(event)" onerror="handleError(event)">


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

Создать импорт динамически:



var link = document . createElement ( 'link' );
  link . rel =  'import' ;
  link . href =  '
http://pixelcom.crimea.ua/page.html'
  link . onload =  function ( e )  {...};
  link . onerror =  function ( e )  {...};
  document . head . appendChild ( link );


Импорт заголовка страницы

Импортировать заголовок страницы где стили и скрипты с помощью HTML imports не составляет труда. Для примера возьмём страницу Bootstrap и импортируем заголовок кодом ниже:



<head>
  <link rel="import" href=
http://pixelcom.crimea.ua/"bootstrap.html">
</head>


Браузер пользователя просто загрузит ссылку на странице bootstrap.html, функция HTML imports импортирует содержимое заголовка .html на вашу веб-страницу.



<link rel="stylesheet" href=
http://pixelcom.crimea.ua/"bootstrap.css">
<link rel="stylesheet" href=
http://pixelcom.crimea.ua/"fonts.css">
<script src=
http://pixelcom.crimea.ua/"jquery.js"></script>
<script src=
http://pixelcom.crimea.ua/"bootstrap.js"></script>
<script src=
http://pixelcom.crimea.ua/"bootstrap-tooltip.js"></script>
<script src=
http://pixelcom.crimea.ua/"bootstrap-dropdown.js"></script>
...

<!-- макет -->
<template>
  ...
</template>


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

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

Вы сможете манипулировать содержанием импорта, используя стандартный DOM API !

link.import

Чтобы получить доступ к уже импортированному содержимому, нужно добавить свойство  .Import :



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


link.import это null при следующих условиях:

  • Браузер не поддерживает HTML импорт.
  • В <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>


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



<head>
  <link rel="import" href=
http://pixelcom.crimea.ua/"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>


Пример импорта документа HTML, если не отображается откройте в Хроме.

Импорт скриптов

Импорт скриптов можно выполнить на главной странице, даже если основной документ доминирует.

Импорт с доступом к своим DOM на странице:

Пример — import.html добавляет стиль для главной страницы



<link rel="stylesheet" href=
http://pixelcom.crimea.ua/"http://www.site.ru/styles.css">
<link rel="stylesheet" href=
http://pixelcom.crimea.ua/"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(...)) .

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

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

Заключение

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>