Три начина за създаване на HTML документи по време на полет

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

Но как да го направите? Сигурен съм, че вече знаете как да добавите HTML към документ, използвайки JavaScript, но до създайте цял HTML документ? Може да се интересувате от някои от методите, които ще ви покажа по-долу, първата от които дори не се нуждае от JavaScript!

Ще покажа всички новосъздадени документи в рамки за да можете да ги видите. Въпреки това, можете да използвате документите, каквито смятате за подходящи. Например, те могат да бъдат записани в база данни или изпратени през уеб услуги да бъде представено някъде другаде.

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

URL адреси на данни ще ви предостави прост и ефективен метод да подават документи на уеб страница. Ако не сте запознати с него, прочетете предишната ни статия за това как работят.

По принцип, URL адресите на данните започнете с данни: URL схема. Това е последвано от съдържание, преди които можете по желание да споменете тип медия и кодиране на съдържанието.

Може би сте виждали изображения, служещи по този начин, къде base64 символи са дадени като съдържанието на URL адреса за данни, след вид медия.

Горният код показва PNG изображение на човека с емотикони в лаптопа - можете да го проверите в браузъра си.

Подобно на това как се прави това, URL адресите на данните могат да служат и за HTML документи:

Вградената рамка показва HTML документа който е добавен, използвайки URL адреса на данните, съдържащ текст / HTML тип на носителя и последван от HTML кода.

Можете да редактирате демонстрацията на Codepen по-долу, като добавите допълнителен HTML код, ако искате да видите как работи техниката.

2. Интерфейс за изпълнение на DOMI

DOMImplementation е интерфейс, който може създавайте чисто нови документи използвайки или неговата createDocument () (за XML) или createHTMLDocument () метод, който ви е необходим. Интерфейсът е достъпен чрез document.implementation обект.

Най- createHTMLDocument () метод приема един незадължителен параметър кой е заглавието на новия документ.

Можеш добавете HTML към новосъздадения документ по същия начин, който обикновено правите: с помощта на методи като добавяне (), appendChild (), и други методи на JavaScript, свързани с DOM.

 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 интерфейс и Здравей свят! е добавен към неговия елемент на тялото.

След това, за да видим как изглежда новосъздаденият документ, когато се визуализира, замених елемента на документа на вградената рамка (iframeDoc.documentElement) с елемента на документа на новия документ (doc.documentElement) използвайки replaceChild () метод. По този начин можете да видите Здравей свят! низ от документа, който създадохме и добавихме към вградената рамка.

3. API на DOMParser

Както подсказва името му, DOMParser API анализира HTML / XML низове в DOM документи.

Ново DOMParser инстанция на обекта може да бъде създаден с помощта на неговия конструктор, DOMParser (). Екземплярът държи метод, наречен parseFromString () че прави парсването след като вземе два аргумента: низът, който трябва да бъде анализиран и типът на документа, който трябва да бъде създаден.

 window.onload = () => var parser = нов 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 () метод.

След това, по същия начин, както в предишния кодов фрагмент, елементът на документа на новосъздадения документ заменя елемента на документа в рамката. В резултат на това HTML кодът в документа, който създадохме, се вижда в iframe.