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

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

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

Я покажу все вновь созданные документы в фреймах чтобы вы могли видеть их визуализированными. Тем не менее, вы можете использовать документы так, как считаете нужным. Например, они могут быть сохраняется в базе данных или же отправлено через веб-сервисы быть оказанным где-то еще.

1. URL данных

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

В основном, URL-адреса данных начать с данные: Схема URL. Это сопровождается контент для обслуживания, перед которым вы можете при желании упомянуть тип носителя и кодирование контента.

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

Приведенный выше код отображает PNG-изображение человека с ноутбуком смайликов - вы можете проверить это в своем браузере.

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

 
2. Интерфейс DOMImplementation
 
DOMImplementation это интерфейс, который может создавать новые документы используя либо его CreateDocument () (для XML) или createHTMLDocument () метод, в зависимости от того, что вам нужно. Доступ к интерфейсу осуществляется с помощью document.implementation объект.
 
 createHTMLDocument () метод принимает один необязательный параметр какой название нового документа.
 
Вы можете добавить HTML во вновь созданный документ так же, как вы обычно делаете: с помощью таких методов, как добавление (), AppendChild (), и другие методы JavaScript, связанные с DOM.
 
  
 
 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append («Привет, мир!»); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
В приведенном выше коде новый документ HTML создан с использованием createHTMLDocument () метод DOMImplementation интерфейс и Привет, мир! строка добавил к своему элементу тела.
 
Затем, чтобы увидеть, как выглядит только что созданный документ при его рендеринге, я заменил элемент документа iframe (iframeDoc.documentElement) с элементом документа нового документа (doc.documentElement) с использованием replaceChild () метод. Таким образом, вы будете быть в состоянии увидеть Привет, мир! строка из документа, который мы создали и добавили в iframe.
 
 
3. DOMParser API
 
Как следует из названия, 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..