Три способа создания HTML-документов на лету
Иногда необходимо создавать HTML-документы на лету с использованием JavaScript или без него. Независимо от того, является ли целью отображение страницы подтверждения или фрейма, содержащего целую страницу, если документ достаточно прост, его можно легко собрать и использовать с URL-адресами данных или JavaScript.
Но как ты это делаешь? Я уверен, что вы уже знаете, как добавить HTML в документ с использованием JavaScript, но как создать целый документ HTML? Возможно, вас заинтересуют некоторые методы, которые я покажу ниже, первый из которых даже не нуждается в JavaScript!
Я покажу все вновь созданные документы в iframes, чтобы вы могли видеть их в визуализации. Тем не менее, вы можете использовать документы по своему усмотрению. Например, они могут быть сохранены в базе данных или отправлены через веб-сервисы для визуализации в другом месте.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: Как использовать HTML &
- URL данных
URL данных предоставить вам простой и эффективный способ подачи документов на веб-странице. Если вы не знакомы с ним, прочитайте нашу предыдущую статью о том, как они работают.
В основном, URL-адреса данных начинаются с схемы data: URL. Далее следует контент для обслуживания, перед которым вы можете указать тип носителя и кодировку контента.
Возможно, вы видели изображения, обслуживаемые таким образом, где символы base64 предоставляются в качестве содержимого URL-адреса данных в соответствии с типом носителя.
Приведенный выше код отображает PNG-изображение человека с смайликом на ноутбуке — вы можете проверить его в своем браузере.
Подобно тому, как это делается, URL-адреса данных также могут обслуживать документы HTML:
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 и Hello World! Строка добавляется к элементу тела.
Затем, чтобы увидеть, как выглядит вновь созданный документ при его визуализации, я заменил элемент документа iframe (iframeDoc.documentElement) на элемент документа нового документа (doc.documentElement), используя replaceChild () метод. Таким образом, вы сможете увидеть Hello World! Строка из документа, который мы создали и добавили в iframe.
Увидеть перо Создайте новый документ HTML с интерфейсом DOMImplementation HONGKIAT (@hkdc) на CodePen,
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.
Увидеть перо Создайте новый документ HTML с помощью API DOMParser HONGKIAT (@hkdc) на CodePen,
Читайте также: Понимание объектной модели документа (DOM) в деталях
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
