Три способи створення HTML-документів на льоту

Створення HTML-документів на льоту, інколи з JavaScript або без нього. Незалежно від того, чи є метою відображення сторінки підтвердження або iframe, що містить цілу сторінку, якщо документ досить простий, це може бути легко поєднуються і подаються з URL-адресами даних або JavaScript.

Але як ви це робите? Я впевнений, що ви вже знаєте, як додати HTML до документа за допомогою JavaScript, але до створити весь документ HTML? Вас можуть зацікавити деякі методи, які я покажу нижче, перший з яких навіть не потребує JavaScript!

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

1. URL-адреси даних

URL-адреси даних надати вам простий і ефективний метод подавати документи на веб-сторінці. Якщо ви не знайомі з ним, прочитайте нашу попередню статтю про те, як вони працюють.

В основному, URL-адреси даних почати з дані: Схема URL. Далі йде вміст, який буде подано, перед яким можна додатково згадати тип носія і кодування вмісту.

Можливо, ви бачили зображення, які подавалися таким чином base64 символів наводяться як вміст URL-адреси даних, наступного за типом носія.

Наведений вище код відображає зображення PNG людини з ноутбуком-смайликом - його можна перевірити у своєму веб-переглядачі.

Подібно до того, як це робиться, URL-адреси даних також можуть обслуговувати документи HTML:

Iframe відображає документ HTML що було додано за допомогою URL-адреси даних, що містить text / html тип ЗМІ, а потім код HTML.

Ви можете відредагувати демонстрацію Codepen нижче, додавши додатковий HTML, якщо ви хочете побачити, як працює техніка.

2. Інтерфейс DOMImplementation

DOMImplementation це інтерфейс, який може створювати абсолютно нові документи використовуючи або її createDocument () (для XML) або createHTMLDocument () метод - який би вам не потрібен. Доступ до інтерфейсу здійснюється за допомогою Документ об'єкт.

The createHTMLDocument () метод приймає один необов'язковий параметр що є назва нового документа.

Ти можеш додайте HTML до новоствореного документа так само, як звичайно: за допомогою таких методів, як додати (), appendChild (), та інші пов'язані з DOM методи JavaScript.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

У наведеному вище коді a створено новий документ HTML за допомогою createHTMLDocument () Метод DOMImplementation інтерфейс і Привіт Світ! string є додано до його елемента тіла.

Потім, щоб побачити, як новостворений документ виглядає під час рендеринга, я замінив елемент документа iframe (iframeDoc.documentElement) з елементом документа нового документа (doc.documentElement) за допомогою replaceChild () метод. Таким чином, ви бути в змозі побачити Привіт Світ! рядок з документа, який ми створили та додав до iframe.

3. API DOMParser

Як випливає з назви, DOMParser API аналізує HTML / XML рядки на документи DOM.

Нове DOMParser об'єкт об'єкта може бути створений за допомогою його конструктора, DOMParser (). Екземпляр містить викликаний метод parseFromString () що виконує розбір після прийняття двох аргументів: рядок, який необхідно проаналізувати, і тип документа, який буде створено.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('Привіт Світ! ', "text / html"); doc.body.append ('додатковий текст'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

У наведеному вище коді новий DOMParser наприклад розбирає рядок HTML до документа DOM за допомогою parseFromString () метод.

Потім, так само, як і в попередньому фрагменті коду, елемент документа новоствореного документа замінює елемент документа iframe. В результаті, HTML код у створеному нами документі стає видимим у iframe.