Главная

Что такое HTML импорт и как это работает?

2014-07-22 в 21:53, admin, рубрики: html, html5, import, w3c, web-разработка, Веб-разработка

Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

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

Введение в HTML импорт

HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)

Обходные пути

Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram'ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.

Начнём

Базовый синтаксис

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

<link rel="import" href="/folder/page.html">

Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.

Базовый пример

Чтобы импорт сработал, страницы должны находиться на том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What are HTML imports and how do they work</title>
    <link rel="import" href="/intro.html">
  </head>
  <body>
    <h1>Hello from Designmodo</h1>
  </body>
</html>

Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript файла.

Внутри intro.html

Что же внутри импортированной страницы?

<div id="intro-dm">
  <h2>We're an awesome blog about web design</h2>
  <p>Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.</p>
</div>

Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.

Вставка импортированного HTML

Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’

В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>What are HTML imports and how do they work</title>
    <link rel="import" href="/intro.html">
  </head>
  <body>
    <h1>Hello from Designmodo</h1>
 
    <script>
      var link = document.querySelector('link[rel=import]');
      var content = link.import.querySelector('#intro-dm');
      document.body.appendChild(content.cloneNode(true));
    </script>
 
  </body>
</html>