Импорт HTML — это способ включения внешних HTML-документов и веб-компонентов на страницу без выполнения запроса Ajax или загрузки iframe. Благодаря этой возможности импорт HTML может привести к сокращению времени загрузки страницы, новым возможностям повторного использования кода и упрощению интеграции с некоторыми популярными службами, такими как Google Maps.
На момент написания статьи технология HTML Imports представляет собой рабочий проект W3C, что означает, что она еще не является веб-стандартом и поддерживается не во всех браузерах . Однако HTML Imports можно безопасно использовать на веб-странице сегодня с полифилом, похожим на Polymer .
Импорт HTML для повторного использования, синдикации
С точки зрения философии, разработчиков программного обеспечения, включая веб-разработчиков, учат не повторяться, а организовывать код в моделях, объектах, функциях и т. П., Чтобы обеспечить единую точку правды и простой способ повторного использования компонентов. Благодаря разработчикам Дейву Томасу и Эндрю Хунту этот подход обычно называется DRY-разработкой или DRY-программированием, что означает «не повторяйся».
В некотором смысле, HTML Imports поддерживает разработку 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));
Скрипт выполняет четыре задания:
- Выбор элемента ссылки
- Импорт внешнего HTML-документа
- Выбор раздела (узла) импортируемого DOM
- Добавление дубликата выбранного узла на текущую страницу
Точно так же сообщение об успешном завершении теперь добавляется на страницу, подобно тому, как работает запрос Ajax.
Этот пример, конечно, чрезмерно упрощен и не будет очень практичным использованием для импорта HTML в живом приложении, учитывая, что написанное сообщение об успехе было четырьмя строками HTML, а для загрузки его использовалось семь строк кода. , Но если бы содержимое в messages.html было значительно более сложным, возможно, с несколькими сотнями строк HTML с поддержкой JavaScript и CSS, для загрузки HTML-импорта потребовалось бы всего семь строк кода.
В качестве второго примера повторного использования импорта рассмотрим, как языки сценариев часто используются для загрузки повторно используемого контента на страницу. Приведенный ниже пример single.php файла single.php начальной темы Underscores для 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 кода single.php есть несколько мест, где single.php внешние ресурсы используются и используются, в том числе для получения заголовка страницы, загрузки шаблона, загрузки после навигации, загрузки боковой панели и загрузки нижнего колонтитула.
То, как PHP-скрипт вызывает внешние ресурсы, аналогично тому, как HTML-импорт может использоваться для добавления контента и функций на страницу. Этот момент может стать более понятным, если учесть, что импорт HTML является частью проекта веб-компонентов HTML .
Веб-компоненты имеют четыре строительных блока, если хотите. Эрик Бидельман , который работает в сфере отношений с разработчиками в Google и представил доклад о веб-компонентах в Googio I / O в 2013 и 2014 годах, описал эти блоки:
- Shadow DOM — обеспечивает DOM и стиль инкапсуляции.
- Шаблоны HTML — это инертные блоки клонируемых элементов DOM, которые служат основой или планом.
- Custom Elements — расширяет существующий словарь HTML и расширяет объекты DOM.
- Импорт HTML — позволяет веб-компонентам упаковываться, совместно использоваться, распространяться и повторно использоваться.
Имея в виду веб-компоненты, вы можете представить, как можно использовать HTML-импорт для загрузки важных функций и функций на любую HTML-страницу. Вот некоторые теоретические веб-компоненты, которые HTML Imports может загрузить для вас.
- Оформить заказ с помощью PayPal —
<x-paypal-express key="6827364828736" callback="some.html">тег<x-paypal-express key="6827364828736" callback="some.html">на странице, передав вложенную HTML-форму, и вы сможете добавить безопасную проверку на любую страницу. - Форма подписки на электронную почту. Использование HTML-импорта позволяет добавить форму подписки на электронную почту так же просто, как импортировать внешний HTML-документ и добавить
<email-subscribe>. - Карты Google — часто используемый пример импорта HTML-файлов — добавление карты Google с простым настраиваемым элементом
<google-map lat="37.790" long="-122.390">. This works, of course, only after HTML Imports has loaded the document defining this custom tag.<google-map lat="37.790" long="-122.390">. This works, of course, only after HTML Imports has loaded the document defining this custom tag.
Все эти примеры полагаются на импорт HTML для включения.
Третий пример того, как HTML Imports может помочь разработчикам веб-приложений и приложений, приведен Бидельманом, который предположил, что Imports может более эффективно загружать некоторые фреймворки или другие пакеты HTML и связанные ресурсы.
В своем конкретном примере Бидлман загрузил Bootstrap с множеством файлов и зависимостей в одном пакете.
<link rel="import" href="bootstrap.html">
Источник с названием bootstrap.html будет выглядеть примерно так же, как и в <head> сайта с поддержкой Bootstrap:
<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
Как упоминалось выше, в настоящее время браузер мало поддерживает импорт HTML , только Chrome 36+, Chrome 37+ для Android и Opera 23+ предлагают встроенную поддержку по умолчанию. Firefox 32+ поддерживает импорт HTML, но только если пользователь включает их в about:config .
Существуют полифиллы, которые сделают эту функцию доступной практически в любом браузере. Пожалуй, самым надежным является вышеупомянутый полифилл Polymer Imports .