HTML5 Imports: вбудовуємо HTML документ в інший HTML

Елемент link \- дуже корисна річ. Він пропонує вам простий спосіб вставляти JavaScript і таблиці стилів в декілька HTML-документів, але, на жаль, він не дозволяє вбудовування HTML-файлів.

Щоб досягти цього, ви повинні використовувати "важкий" елемент iframe або JavaScript об'єкт XMLHttpRequest, який використовується в AJAX. Але тепер, з введенням нової технології, відому як HTML5 import, спосіб створення веб- сайтів докорінно змінився.

Імпорт дозволяє нам використовувати елемент link для імпорту HTML- документів в інші HTML-документи. Це значить, що тепер не потрібно обмежуватися елементом iframe або писати купу Ajax. Імпорт також має можливість створювати зв'язку CSS, JavaScript і HTML. Це робить його чудовим інструментом для завантаження автономних компонентів в HTML-документи.

Цей пост написаний з метою допомогти вам дізнатися, як реалізувати імпорт HTML.

Вбудовування HTML-файлу в інший HTML

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

На жаль, браузерна підтримка HTML5 імпорту як і раніше дуже обмежена. Впровадження цієї нової і цікавої технології вперше було впроваджено в 31-ї версії браузера Google Chrome, де, як і раніше, потрібно включити HTML імпорт вручну. Для цього потрібно було зайти в chrome://flags (експериментальні функції Chrome), увімкнути прапорець "включити HTML-імпорт", а потім знову запустити браузер.

Ви будете дуже раді дізнатися, що Chrome 36 має вбудовану підтримку HTML імпорту, тепер вам не потрібно турбуватися про активацію цієї функції вручну. Просто впроваджуйте HTML5 імпорт в ваші документи і Chrome буде обробляти їх.

Щоб виявити, чи підтримує браузер HTML5 імпорт чи ні, ви можете використовувати функції, наведені нижче:

    if ("import" in document.createElement("link")) {
      // Цей браузер підтримує HTML5 Imports.
    }

Для всіх інших браузерів, які не підтримують HTML5 імпорт, ви можете скористатися Polymer Polyfill.

Використовуємо HTML Import

Як вже було сказано, тепер ми можемо використовувати елемент для імпорту. Вказуємо шлях до файлу, який ви хочете завантажити, так само, як раніше ми імпортували скрипти і таблиці стилів в head HTML документа.

    <link href=" styles.css" rel="stylesheet">

Все, що вам потрібно зробити для імпорту, це замінити значення атрибуту rel "import". Коли ви встановите атрибут rel для імпорту, це говорить браузеру імпортувати файл в документ.

    <link href="import/doc.html" rel="import">

Примітка: веб адреса (import) - місце імпорту. Якщо ви хочете завантажити HTML-документ з іншого домену, ви повинні переконатися, що розташування імпорту підтримує CORS.

    <link href="http://example.com/one.html" rel="import">

Отримуємо контент

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

Примітка: це правило застосовується тільки для HTML-контенту. Браузер буде автоматично завантажувати всі JavaScript і CSS, а також застосовувати його в основному документі.

Для доступу до вмісту імпорту, ви повинні писати певний JavaScript.

    var doc= document.querySelector('link[rel="import"]').import;

Це дозволить захопити весь вміст doc.html, який ми імпортуємо в нашу веб- сторінку. Лінк-елемент буде мати значення null, якщо:

• На ресурсі відключений CORS.

• не має rel="import".

• HTML імпорт не підтримується браузером.

• був видалений з DOM або не був доданий в DOM.

Припустимо, doc.html містить:

    <text class="doc">
    <h2>Title of the Document</h2>
    <p><span>Author: Ajeet Yadav</span></p>
    <p>CreativeWebLogix: Convert Existing Site to Responsive</p>
    </text>

Тепер нам потрібно отримати вміст, виділити текст і скопіювати його в нашу сторінку.

    <script>
    var doc = document.querySelector('link[rel="import"]').import;
    // Grab DOM from doc.html's document.
    var text = doc.querySelector('.doc');
    document.body.appendChild(text.cloneNode(true));
    </script>

Це все!

Використовуємо шаблони

Крім того, Ви також можете використовувати HTML імпорт в тандемі з елементом

    <script>
    var doc = document.querySelector('link[rel="import"]').import;
    var text = doc.querySelector('.doc');
    var clone = document.importNode(text.content, true);
    document.querySelector('#container').appendChild(clone);
    </script>

Завантажуємо події

Елемент link має дві події: onerror (невдала спроба завантаження імпорту) і onload (для успішно завантаження), які ви можете використовувати, щоб відслідковувати стан завантаження вашого імпорту. Для того, щоб виконати код після завантаження файлу імпорту, і, щоб уникнути помилок, краще скористатися onload і onerror атрибутами.

    <script>
    functionhandleLoad(event) {
    console.log('Loaded import: ' + event.target.href);
    }
     
    functionhandleError(event) {
    console.log('Error loading import: ' + event.target.href);
    }
    </script>
    <link href="doc.html" onerror="handleError(event)" onload="handleLoad(event)" rel="import">

Примітка: браузер завантажує файл імпорту відразу після виявлення елемента link. Тому, переконайтеся в тому,що ви визначити обробники подій перед тегом link в розмітці. В іншому випадку, ви можете отримати консоль помилок через невизначені функції.

Якщо ви створили імпортних динамічно, то:

    var link = document.createElement('link');
    link.rel = 'import';
    link.href = 'doc.html'
    link.onload = function(event) {...};
    link.onerror = function(event) {...};
    document.head.appendChild(link);

Об'єднання ресурсів

Як я згадував раніше, імпорт - вельми корисний інструмент для комплектації HTML, CSS і JavaScript. Нижче показано приклад з реального світу : Bootstrap, який складається з численних та <script> елементів.

    <link href="bootstrap.html" rel="import">

При імпорті bootstrap.html в HTML-документ, браузер спочатку завантажує CSS і JavaScript і вже потім застосувує їх до основний документ.

    <link href="bootstrap.css" rel="stylesheet">
    <link href="fonts.css" rel="stylesheet">
    <script src="bootstrap.js"></script>
    <script src="jquery.js"></script>
    <script src="bootstrap-dropdown.js"></script>
    <script src="bootstrap-tooltip.js"></script>

Підсумок

Це все завдяки HTML5 імпорт! Тепер ви готові створити багаторазовий контент з допомогою рядка коду, тобто . Це дуже потужна технологія повністю змінила світ front-end веб-розробки.