Link rel import не работает

HTML-импорт — include для веба: часть 1

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

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

Для чего нужен HTML-импорт?

События load/error

После загрузки импорта запускает событие , а в случае ошибки (например 404), событие .

Импорт всегда загружается сразу же, в порядке нахождения тега . Отловить события загрузки можно при помощи атрибутов :

Примечание: обработчики событий загрузки/ошибки нужно объявлять перед импортом, так как браузер загружает импорт в тот момент, когда встречает тег импорта. Если на момент импорта нет обработчика загрузки, в консоли выведется ошибка undefined function.

Вы, также, можете динамически создавать импорт:

Использование содержимого импорта

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

Вот он момент прозрения, импорт, это всего-лишь документ. На самом деле, содержимое импорта так и называется документ импорта(import document). А использовать результат импорта вы можете стандартными средствами DOM API!

link.import

Для получения содержимого импорта используется свойство .import элемента :

link.import равен null при следующих обстоятельствах:

• Браузер не поддерживает импорт.
• У элемента нет атрибута rel=»import» .
  Объект не добавлен в DOM.
  Или был удален из DOM
  Ресурс не поддерживает CORS.

Полный пример

Допустим у нас есть страница warnings.html :

Вы можете использовать только необходимую вам часть импортированной страницы:

Скрипты в импорте

Импорт работает не совсем, как часть документа, который его использует. Но вы, все же, можете работать с подключившей его страницей. Из импортированной страницы можно работать, как с внутренним DOM, так и с главным документом:

Пример — import.html добавляет один из своих стилей главному документу

Итак, что здесь происходит? При помощи мы получаем доступ к внутреннему элементу-корню импортированного документа и добавляем его кусок в главный документ (). Это конечно бесполезный код, но нам он нужен, чтобы понять, что мы можем обращаться как к главному, так и ко внутреннему корню DOM.

Скрипты внутри импорта могут как сами исполнять код, так и предоставлять функции для выполнения в главном документе. Это похоже на модули в Питоне.

Правила импорта:

• Код импорта выполняется в контексте содержащего его документа. Из этого исходят две удобные вещи:
  • Функции объявленные в импорте содержатся в главном объекте window .
  • Вам не нужно делать действий вроде добавления в главный документ тегов

  Источник

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

  Перевод статьи «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 тега, так что должно быть нетрудно понять следующую строчку:

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

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

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

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

  Внутри intro.html

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

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

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

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

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

  Переходим на следующий уровень

  Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега
  

  Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.

  Источник

  getting error link.import is null in firefox

  2 Answers 2

  I would recommend to use the file html-imports.min.js from the HTML Imports polyfill rather that the firefox flag that is not enabled on your users’ browsers and whose implementation is outdated (and may cause conficts with other polyfills for custom elements or shadow DOM).

  Also, with the polyfill, keep in mind that the HTML imports will always be async , so you’ll have to wait for the HTMLImportsLoaded event before using the content of the link.import property.

  Only Chromium/Blink-based browsers have shipped
  HTML Imports support. Firefox doesn’t support HTML Imports unless you enable the dom.webcomponents.enabled flag:

  Firefox will not ship HTML Imports. See this Hacks blog post for more information. You can still use HTML Imports in Firefox by enabling the dom.webcomponents.enabled flag. If you don’t want to enable the flag, you can use a polyfill such as Google’s webcomponents.js.

  The current HTML Imports spec is basically dead at this point, stalled since February 2016 at just Working Draft status, and won’t be advancing any further along the W3C standardization track.

  So no other browsers will ever be implementing that old HTML Imports spec. Instead at some point a new spec will be developed—one that hooks into ES6 Modules and the underlying machinery of

  Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!
  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

  Источник

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

  Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.

  Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.

  HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.

  Предлагаю вам ознакомиться с видео по данной теме.

  Использование HTML импортов

  Чтобы загрузить HTML файл, добавьте тэг link с import ‘ом в параметре rel и href , содержащий путь до нужного файла. К примеру, если вы хотите загрузить файл под названием component.html в index.html , то все должно выглядеть так:
  index.html

  Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
  component.html

  doctype , html , head , body необязательны. HTML импорты автомагически загрузят все указанные элементы, добавят их на страницу и запустят JavaScript, если имеется.

  Порядок исполнения

  Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.

  Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.

  Итак, как же работают импорты?

  Скрипт внутри HTML импорта работает как обычный тэг script с атрибутом defer . В примере ниже index.html запустит script1.js и script2.js внутри component.html перед исполнением script3.js .
  index.html

  1. Загружается component.html из index.html и ожидает исполнения;
  2. Загружается script1.js в component.html ;
  3. Загружается script2.js в component.html после script1.js ;
  4. Загружается script3.js в index.html после script2.js .

  Заметьте, что добавление атрибута async в link[rel=»import»] расценивается как атрибут async в тэге script . Он не будет блокировать HTML. Это может потенциально улучшить производительность вашего проекта.

  За рамками происходящего

  На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать в http://example.com/ страницу http://webcomponents.org/.

  Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.

  Объекты window и document в импортируемых файлах

  Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.

  Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.

  Используя написанный ранее код в качестве примера, заставим document в index.html и component.html ссылаться на document в index.html .

  Внесем небольшие изменения в наши файлы.
  index.html

  Для получения document из component.html дополните ваш код с document.currentScript.ownerDocument .
  component.html

  Если вы используете webcomponents.js , воспользуйтесь document._currentScript вместо document.currentScript . Нижнее подчеркивание в currentScript используется для поддержания браузеров, не способных работать с этим компонентом без использования сего знака.
  component.html

  Написав вот это в начале вашего скрипта, можно легко получить доступ к document из component.html , даже если браузер не поддерживает HTML импорты.

  Вопросы производительности

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

  Зависимости

  Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:

  Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
  index.html

  Данная проблема крайне легко решается в импортах.

  В отличие от тэга script , объекты нашей статьи не загружают повторно один и тот же материал. Смотря на последний пример, достаточно обернуть тэг script HTML импортом, и данный ресурс не будет загружен дважды.
  
  Но есть и другая проблема: теперь файлов для загрузки стало больше. Что делать, если таких будет не два, а гораздо больше?

  К счастью, нам на помощь идет инструмент под названием «Vulcanize».

  Объединение сетевых запросов

  Vulcanize — инструмент объединения нескольких HTML файлов в один, с помощью чего число подключений к сети в целях загрузки необходимых документов сокращается. Вы можете установить его с помощью npm и использовать в командной строке. Также существуют аналоги для grunt и gulp , с помощью чего можно сделать «Vulcanize» частью вашего процесса сборки.

  Для объединения файлов index.html используем следующий код:

  При исполнении данной команды все зависимости index.html будут соединены в файле vulcanized.html .

  Прочитать больше о данном инструменте можно здесь.

  Сочетание импортов с Template, Shadow DOM и Custom Elements

  Для тех, кто не знает о данных технологиях: С templates определение содержания пользовательского элемента может быть декларативным. С Shadow DOM styles , ID и classes элемента можно использовать немного иначе. С Custom Elements можно создать собственные HTML тэги. Неплохо, не так ли?

  Объединение импортов с собственными веб-компонентами получит модульность и возможность многократного использования. Любой сможет их использовать, добавив лишь тэг link .
  x-component.html

  Обратите внимание, что объект document в x-component.html такой же, как и в index.html . Не нужно писать ничего сложного, все работает само и за вас.

  Поддерживаемые браузеры

  HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».

  Источник

  Читайте также:  Как починить предохранительный клапан бойлера