Імпорт файлів у HTML

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

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

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

Розробники програмного забезпечення, у тому числі і веб-розробники, намагаються не дублювати код, а скоріше розподіляти його за моделями, об'єктами, функціями. Завдяки розробникам Дейву Томасу та Ендрю Ханту цей підхід зазвичай називають DRY-розробкою або DRY-програмуванням, що означає в перекладі з англійської "не повторюй себе".

У певному сенсі HTML імпорт підтримує розвиток DRY. Ось приклад – уявіть, що у вас є три повідомлення, які повторюються на кількох веб-сторінках. Замість копіювання та вставлення або передрукування цих повідомлень для кожної сторінки або проекту, вони можуть бути включені за допомогою HTML імпорту.

Наприклад візьмемо HTML-файл з назвою messages.html:

Для повторного використання контенту з messages.html, спочатку увімкніть документ через HTML імпорт. Це здійснюється додаванням тега з атрибутом rel, рівним "import" і атрибутом href, що приймає значення messages.html:

Цей код виконує такі завдання:

  • Вибирає елемент link
  • Імпортує файл
  • Витягує імпортований DOM
  • Вставляє вміст на сторінку

Ось таким чином, повідомлення “success” тепер включено на сторінці, подібно до того, як це працює через запит AJAX.

Як другий приклад розглянемо, як мови програмування часто використовуються для завантаження повторно використовуваного контенту. У прикладі з файлу single.php з'являється вибір вікна привітання для WordPress:

Зверніть увагу, що є кілька місць, в даному прикладі коли для 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-сторінки. Наприклад, цю техніку можна застосувати в таких випадках.

Третійприклад показує те, як HTML імпорт може допомогти розробникам, ефективніше завантажити деякі фреймворки чи інші зв'язки HTML.

У цьому прикладі завантажуємо Bootstrap і його численні файли:

У bootstrap.html підключаємо потрібні файли, як би ми це зробили в розділі:

Браузерна підтримка

Як уже згадувалося вище, в даний час існує досить мало браузерів, що підтримують HTML імпорт. Винятки - Chrome 36+, Chrome 37+ для Android та Opera 23+0.

Також є полізаповнення, які роблять цю функцію доступною практично в будь-якому браузері. Найнадійнішим є вищезгаданий проект Polymer.

Цей урок підготовлений для вас командою сайту ruseller.com Джерело уроку: http://www.sitepoint.com/introduction-html-imports-tutorial/ Переклав: Станіслав Протасевич Урок створений: 30 Вересня 2014 Переглядів: 14014 Правила передруку

5 останніх уроків рубрики "HTML та DHTML"

Лайфхак: найкорисніша функція var_export()

При написанні чи налагодження PHP скриптів ми часто користуємося функціями var_dump() і print_r() виведення попередніх даних масив і об'єктів. У цьому пості я хотів би розповісти вам про функцію var_export(), яка може перетворити масив у формат, придатний для PHP коду.

17 безкоштовних шаблонів адмінок

Безкоштовні шаблони панелей адміністрування.

30 сайтів для скачки безкоштовних шаблонів поштових листів

Створення шаблону для письма не така вже й проста справа. Пропонуємо вам вибірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.

Як здійснити затримку під час натискання клавіші за допомогою jQuery?

Наприклад, у вас є поле пошуку,яке обробляється при кожному натисканні клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде надіслано за такими фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?

15 нових сайтів для скачування безкоштовних фото

Добірка із 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.