How to import html to html
How to import html to html
HTML Imports
W3C First Public Working Draft 14 May 2013
Abstract
HTML Imports are a way to include and reuse HTML documents in other HTML documents.
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Publication as a First Public Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was published by the Web Applications Working Group as an Editor’s Draft. If you wish to make comments regarding this document, please send them to public-webapps@w3.org (subscribe, archives). All feedback is welcome.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
Table of Contents
About this Document
All diagrams, examples, notes, are non-normative, as well as sections explicitly marked as non-normative. Everything else in this specification is normative.
The key words «MUST», «MUST NOT», «REQUIRED», «SHALL», «SHALL NOT», «SHOULD», «SHOULD NOT», «RECOMMENDED», «MAY», and «OPTIONAL» in the normative parts of this document are to be interpreted as described in RFC2119. For readability, these words do not appear in all uppercase letters in this specification.
Any point, at which a conforming UA must make decisions about the state or reaction to the state of the conceptual model, is captured as algorithm. The algorithms are defined in terms of processing equivalence. The is a constraint imposed on the algorithm implementors, requiring the output of the both UA-implemented and the specified algorithm to be exactly the same for all inputs.
Dependencies
This document relies on the following specifications:
Terminology
Link Type » import «
To enable declaring imports in HTML, a new link type is added to HTML link types:
The import keyword may be used with link elements. This keyword creates an external resource link to a import.
The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last.
The following document has one import, located at /imports/heart.html :
Interface Import
The Import interface represents an import in a master document:
The attribute must return the import location or null if none.
The attribute must return the node that links master document to the import.
The attribute must return the imported document.
The LinkImport interface provides access to a import from master document:
The attribute must return the import for the node that implements this interface.
The link element implements LinkImport interface:
For link elements that do not represent imports, the import attribute of the LinkImport interface must return null. Similarly, if the user agent does not support imports, or whose resource is CORS-cross-origin, the import attribute of the LinkImport interface must return null.
import location The import location must be the result of resolving the URL given by link element’s href content attribute, relative to the element, or empty string if that fails. owner node The owner node value must be the the link element.
The same object must be returned each time.
Giving up an import before it loads, even if the import eventually does still load, means that the script might end up operating with incorrect information. For example, if an import registers a custom element and a script relies on the availability of this element, the script will find that this element is unavailable if the user agent gives up early. Implementors have to balance the likelihood of a script using incorrect information with the performance impact of doing nothing while waiting for a slow network request to finish.
A Document if it does not have an import that is blocking scripts as defined in the previous paragraph.
Loading Imports
When a import is fetched, the user agent must run the algorithm, which must be equivalent to running these steps:
The sub-imports are discovered and processed with the algorithm, which must be equivalent to these steps:
Parsing Imports
The parsing of imports is defined as a set of changes to the HTML Parsing.
Additions to Prepare A Script Algorithm
In step 15 of prepare a script algorithm, modify the last part of condition which begins with If element does not have a src attribute to read:
Additions to Tree Construction Algorithm
In sub-condition named Otherwise of condition An end tag whose name is «script» in «text» insertion mode, modify step 3 to read:
Modify sub-step 1 of step 3 of the end to read:
Additions to Parsing XHTML Documents
Modify step 3 of steps that run following preparing the script element to read:
Acknowledgements
David Hyatt developed XBL 1.0, and Ian Hickson co-wrote XBL 2.0. These documents provided tremendous insight into the problem of behavior attachment and greatly influenced this specification.
Alex Russell and his considerable forethought triggered a new wave of enthusiasm around the subject of behavior attachment and how it can be applied practically on the Web.
This list is too short. There’s a lot of work left to do. Please contribute by reviewing and filing bugs—and don’t forget to ask the editor to add your name into this section.
Введение в HTML импорты
Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.
Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.
HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.
Предлагаю вам ознакомиться с видео по данной теме.
Использование HTML импортов
Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
component.html
Порядок исполнения
Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.
Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.
Итак, как же работают импорты?
За рамками происходящего
На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать в http://example.com/ страницу http://webcomponents.org/.
Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.
Объекты window и document в импортируемых файлах
Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.
Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.
Внесем небольшие изменения в наши файлы.
index.html
Вопросы производительности
Один из плюсов использования импортов — возможность самостоятельно распределить нагрузку страницы и порядок обработки импортируемых объектов. Но это еще и означает, что HTML код увеличится. Вообще, есть несколько пунктов для сравнения:
Зависимости
Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:
Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html
Данная проблема крайне легко решается в импортах.
К счастью, нам на помощь идет инструмент под названием «Vulcanize».
Объединение сетевых запросов
Для объединения файлов index.html используем следующий код:
Прочитать больше о данном инструменте можно здесь.
Сочетание импортов с Template, Shadow DOM и Custom Elements
Поддерживаемые браузеры
HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».
HTML-импорт — include для веба: часть 1
Перевод статьи «HTML Imports #include for the web», Eric Bidelman.
От переводчика
Недавно я перевел статью по основам HTML Import. Я обещал, что если эта тема заинтересует хабра-сообщество, то переведу более подробную статью. Я решил разбить перевод на две одинаковые по размеру части, так как, по моему, на одну часть слишком много буков. Вторая часть выйдет спустя несколько дней после публикации этой части. Если, конечно, эта часть более-менее понравится хабра-сообществу.
Для чего нужен HTML-импорт?
События load/error
Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.
Вы, также, можете динамически создавать импорт:
Использование содержимого импорта
Элемент импорта на странице не указывает браузеру, где размещать содержимое импорта. Он только говорит браузеру получить документ для его дальнейшего использования. Чтобы использовать содержимое импорта, нам нужно написать немного JS кода.
Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!
link.import
Полный пример
Допустим у нас есть страница warnings.html :
Вы можете использовать только необходимую вам часть импортированной страницы:
Скрипты в импорте
Импорт работает не совсем, как часть документа, который его использует. Но вы, все же, можете работать с подключившей его страницей. Из импортированной страницы можно работать, как с внутренним DOM, так и с главным документом:
Пример — import.html добавляет один из своих стилей главному документу
Итак, что здесь происходит? При помощи мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (). Это конечно бесполезный код, но нам он нужен, чтобы понять, что мы можем обращаться как к главному, так и ко внутреннему корню DOM.
Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.
Is there a way to import HTML into an HTML file?
Either way, let’s say for example that I’m building a website with many sections and I wanted these sections to be modular, so each section is it’s own html file. So basically I could include this little module anywhere I want on the main html file or maybe I could simply include navbars and footers onto other HTML pages without having to rewrite lines of code.
Is this possible with just HTML alone?
4 Answers 4
Trending sort
Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.
It falls back to sorting by highest score if no posts are trending.
Switch to Trending sort
Edit: An option worthwhile exploring is the object tag. You can include another file (of any kind) onto your page.
This seems like a more suitable option compared to the rest of options below.
It works on similar basis as HTML5 Import.
The object tag is part of HTML 4 therefore it’s supported since IE6+, Firefox 2+, Chrome 1+ etc.
Using HTML5 Import. It does have very limited support/browsers implementing it.
Other than that you will need Javascript at bare minimum to import another file if you want to do it from client-side. There are variety of options available to do it from back-end depending on your tech.
Another possibility as Pete highlighted is the use of iframes (although I would prefer not to use them).
The use of HTML5 Imports is highly discouraged as you can see on here.
Here’s few notes taken from the above link:
HTML-импорт — include для веба: часть 2
Предоставление веб-компонентов
Подключение шаблонов
HTML-шаблоны это хороший пример того, где может пригодиться импорт. Тэг
index.html
Определение пользовательских элементов
Пользовательские элементы это еще одна технология веб-компонентов, которая отлично сочетается с HTML-импортом. Как мы знаем в импорте могут выполняться скрипты, таким образом мы можем объявлять и регистрировать пользовательские элементы, позволяя использовать их в разметке главного документа. Назовем это авторегистрацией.
Как мне кажется, такой подход превращает HTML-импорт в идеальный способ предоставления веб-компонентов.
Работа с зависимостями и вложенным импортом
Вложенный импорт
Иногда нужно импортировать что-нибудь внутри импорта. Например, если вы хотите повторно использовать или расширить компонент, вы можете использовать вложенный импорт.
Снизу представлен реальный пример из Полимера. Это компонент tab (
Вот так разработчики могут использовать этот элемент:
Когда выйдет новая версия селектора, например
, вы сможете подменить
Управление зависимостями
Как вы знаете, если дважды подключить JQuery, это приведет к ошибкам. Не будет ли это проблемой, если несколько компонентов используют одну библиотеку? Нет, если мы будем использовать HTML-импорт! Использование импорта само по себе разрешает проблему управления зависимостями.
Оборачивая используемые библиотеки в импорт, вы автоматически избегаете их повторной загрузки. Импортируемый документ парсится только один раз. Скрипты в нем тоже выполняются только раз. Для примера вы можете импортировать jquery.html, который загружает сам JQuery.
Данный импорт может быть использован в других импортируемых компонентах:
Если понадобится, главный документ также может использовать jquery.html:
Несмотря на то, что jquery.html подключается в нескольких разных документах, его загрузка и исполнение происходит только один раз. Это можно увидеть заглянув на панель network:
Соображения производительности
HTML-импорт — замечательная технология, но как и с любой новой веб-технологией, вы должны с умом подойти к её использованию. Лучшие практики веб-разработки никто не отменял. Вот несколько вещей, которые вы должны помнить, работая с импортом.
Объединение импорта
Очень важно сократить количество запросов при загрузке страницы. Поэтому, если вам нужно импортировать большое количество компонентов верхнего уровня, постарайтесь объединить их в единственный файл для импорта.
Vulcanize, инструмент от создателей Полимера, используемый для построения проектов из npm. Он производит рекурсивную сборку всех импортируемых документов в единственный главный файл, это, по сути, объединение всех веб-компонентов в один файл. Данный инструмент написали создатели Полимера.
Браузерное кеширование импорта
HTML-импорт также хорошо справляется с логикой кеширования. Импорт cdn.com/bootstrap.html содержит вложенные ресурсы, но они так же кешируются.
Содержимое используется, только когда оно добавлено в DOM
Содержимое никак не вызывается, до тех пор пока оно не использовано в скриптах. Для примера у нас есть динамически созданная таблица стилей:
Браузер не запросит styles.css, до тех пор пока элемент link не будет добавлен в DOM:
Другой пример, это динамически созданная разметка:
Элемент h2 ничего не изменит, пока вы не добавите его в DOM.
Эта же идея остается истинной и для импортируемых документов. Пока вы не добавите их в DOM, они ничего не делают. Но на самом деле, скрипты являются исключением, они исполняются, сразу же при загрузке импорта. Смотрите скрипты в импорте.
Оптимизация для асинхронной загрузки
Импорт не блокирует парсинг главного документа. Скрипты внутри импорта выполняются по очереди, но не блокируют импортирующую страницу. Это значит, что происходит отложенное выполнение скриптов. Преимущество подключения импорта в элементе
Есть несколько способов для оптимизации асинхронного поведения, использование которых зависит от структуры вашего приложения. Следующие техники помогут избежать блокировки отображения главной страницы.
Сценарий #1 (предпочтительный): у вас нет скриптов в элементе или по ходу тела документа
Я рекомендую использовать скрипты как можно ниже, чтобы предотвратить немедленную загрузку вашего импорта. Но вы ведь и так следуете этой практике, НЕ ТАК ЛИ!? 😉
Все скрипты расположены снизу.
Сценарий 1.5: импорт добавляется самостоятельно
Другой вариант, это позволять импорту самому себя рендерить. Если автор импорта предоставляет соглашения о размещении импорта в главном документе, то он может сам себя размещать в оговоренных местах:
Сценарий #2: у вас есть скрипты в элементе или по ходу тела документа
Если у вас есть большой импорт, на загрузку которого нужно много времени, следующий за ним скрипт остановит рендеринг страницы. Google Analytics например, рекомендует добавлять отслеживающий код в элементе
Как вариант, вы можете добавить весь импорт в конце