- PVSM.RU - https://www.pvsm.ru -
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.
Вы когда-нибудь замечали, что включение одной HTML страницы в другую, это какая-то инородная концепция? Это то, что должно быть просто, но не это не часто происходит. Это не невозможно, но трудно. К счастью есть HTML импорт, который позволяет запросто помещать HTML страницы, а также CSS и JavaScript файлы, внутрь других 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 файла.
Что же внутри импортированной страницы?
<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, нам нужно написать несколько строчек на 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>
Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
Автор: jojo97
Источник [1]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/web-razrabotka/65659
Ссылки в тексте:
[1] Источник: http://habrahabr.ru/post/230751/
Нажмите здесь для печати.