Импорт файлов в HTML

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

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

HTML импорт как инструмент для повторного использования и агрегирования

Разработчики программного обеспечения, в том числе и веб-разработчики, стараются не дублировать код, а скорее распределять его по моделям, объектам, функциям. Благодаря разработчикам Дэйву Томасу и Эндрю Ханту, этот подход обычно называют DRY-разработкой или DRY-программированием, что значит в переводе с английского "не повторяй себя".

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

Для примера возьмём HTML-файл с названием messages.html:

<div class="message-success">
    <h2>Success</h2>
    <p>Whatever you just did worked.</p>
</div>

<div class="message-failure">
    <h2>Failure</h2>
    <p>What a disappointment.</p>
</div>

<div class="message-ego-boost">
    <h2>You are amazing.</h2>
</div>

Для повторного использования контента из messages.html, для начала включите документ через HTML импорт. Это осуществляется добавлением тега <link> с атрибутом rel, равным "import" и атрибутом href, принимающим значение messages.html:

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

Мы можем написать небольшой отрывок, используя JavaScript, который обращается к документу messages.html и загружает сообщения “success” на странице. Каждое из последующих сообщений (или все вместе) также могут быть загружены аналогичным образом, в зависимости от того, как вам хотелось бы использовать их. Вот код:

var htmlImport = document.querySelector('link[rel="import"]');
var htmlDoc = htmlImport.import;
var htmlMessage = htmlDoc.querySelector('.message-success');
document.body.appendChild(htmlMessage.cloneNode(true));

Данный код выполняет следующие задачи:

• Выбирает элемент link
• Импортирует файл
• Извлекает импортированный DOM
• Вставляет содержимое на страницу

Вот таким образом, сообщение “success” теперь включено на странице, подобно тому, как это работает через AJAX запрос.

Этот пример, конечно, крайне упрощён. Если бы содержание в messages.html было значительно сложнее, например, в несколько сотен строк HTML, JavaScript и CSS, то наш код импорта выглядел бы чуть сложнее.

В качестве второго примера рассмотрим, как языки программирования часто используются для загрузки повторно-используемого контента. В приведённом ниже примере из файла single.php появляется выбор окна приветствия для WordPress:

<?php
/**
 * The template for displaying all single posts.
 *
 * @package _s
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'single' ); ?>

            <?php _s_post_nav(); ?>

            <?php
                // If comments are open or we have at least one comment, load up the comment template
                if ( comments_open() || '0' != get_comments_number() ) :
                    comments_template();
                endif;
            ?>

        <?php endwhile; // end of the loop. ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

Аналогично тому, как скрипт PHP обращается к внешнему ресурсу, HTML импорт может быть использован для добавления содержимого. Эта аналогия может стать яснее, если учесть, что HTML импорт являются частью проекта HTML Web Components draft.

Допустим, что веб-компоненты имеют четыре составляющих блока. Эрик Байдельман, который работает в коммуникации с разработчиками в Google, а также представлял веб-компоненты в Googio I / O в 2013 и 2014 годах, описал их так:

• Shadow DOM (теневой DOM): работа с DOM и стилями;
• HTML Templates (HTML шаблоны): DOM фрагменты, для обеспечения базовой структуры кода;
• Custom Elements (пользовательские элементы) - собственные HTMLэлементы;
• HTML Imports (HTML импорт) – позволяют объединять веб-компоненты и повторно их использовать.

Учитывая всё вышеперечисленное, теперь вы можете себе представить, как можно использовать HTML импорт для улучшения загрузки различных компонентов HTML-страницы. К примеру данную технику можно применить в следующих случаях.

• Оплата через PayPal – используйте тег <x-paypal-express key="6827364828736" callback="some.html">, и вы можете добавить безопасную возможность оплаты на любую страницу.
• Форма для E-mail подписки - используя HTML импорт, добавление формы подписки может быть также просто, как импортирование внешнего HTML документа и добавления тега <email-subscribe>.
• Карты Google - часто используемый пример импорта HTML, вставляем пользовательский элемент <google-map lat="37.790" long="-122.390">. Конечно, это сработает, только после того как будет загружен документ, определяющий специальный тег.

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

В данном примере, загружаем Bootstrap и его многочисленные файлы:

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

В bootstrap.html подключаем нужные файлы, как бы мы это сделали в разделе <head>:

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

Браузерная поддержка

Как уже упоминалось выше, в настоящее время существует достаточно мало браузеров поддерживающих HTML импорт. Исключения - Chrome 36+, Chrome 37+ для Android и Opera 23+0.

Также существуют полизаполнения, которые делают эту функцию доступной практически в любом браузере. Самым надёжным является вышеупомянутый проект Polymer.