Tři způsoby, jak vytvořit HTML dokumenty na Fly

Vytváření HTML dokumentů za chodu, někdy s JavaScriptem nebo bez něj. Zda je cílem zobrazení stránky s potvrzením nebo iframe obsahující celou stránku, pokud je dokument dostatečně jednoduchý, může být snadno sestavené a doručené buď s datovými adresami URL nebo JavaScriptem.

Ale jak to jdeš? Určitě již víte, jak přidat HTML do dokumentu pomocí JavaScriptu, ale do vytvořit celý HTML dokument? Možná budete mít zájem o některé z metod, které budu zobrazovat níže, z nichž první ani nepotřebuje JavaScript!

Ukážu všechny nově vytvořené dokumenty v iframe abyste je mohli vidět. Dokumenty však můžete použít, jakkoli uznáte za vhodné. Mohou to být například uloženy do databáze nebo přes webové služby být vykreslen někde jinde.

1. Datové adresy URL

Datové adresy URL vám poskytne jednoduchou a efektivní metodu sloužit dokumenty na webové stránce. Pokud nejste obeznámeni s tím, přečtěte si náš předchozí článek o tom, jak fungují.

V podstatě datové adresy URL začněte s data: URL schéma. Za ním následuje obsah, který má být doručován, před kterým můžete volitelně zmínit typ média a kódování obsahu.

Možná jste viděli obrázky, které sloužily tímto způsobem, kde base64 znaků jsou uvedeny jako obsah adresy URL dat podle typu média.

Výše uvedený kód zobrazuje obraz PNG muže s emoji notebooku - můžete ho zkontrolovat ve svém prohlížeči.

Podobně jako je tomu i v tomto případě, URL dat může také sloužit HTML dokumentům:

Iframe vykreslí HTML dokument který byl přidán pomocí datové adresy URL obsahující text / html typ média a následovaný kód HTML.

Demoverze Codepen můžete upravit níže přidáním extra HTML, pokud chcete vidět, jak technika funguje.

2. Rozhraní DOMImplementation

DOMImplementation je rozhraní, které může vytvořit zcela nové dokumenty pomocí buď jeho createDocument () (pro XML) nebo createHTMLDocument () metoda - podle toho, co potřebujete. K rozhraní je přistupováno pomocí document.implementation objekt.

createHTMLDocument () metoda trvá jeden volitelný parametr který je název nového dokumentu.

Můžeš přidat HTML do nově vytvořeného dokumentu stejným způsobem jako obvykle: pomocí metod jako připojit(), appendChild (), a další metody JavaScript související s 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);  

Ve výše uvedeném kódu a vytvořen nový dokument HTML za použití createHTMLDocument () metoda DOMImplementation rozhraní a Ahoj světe! řetězec je přidán k jeho elementu těla.

Poté, když jsem viděl, jak nově vytvořený dokument vypadá při jeho vykreslení, nahradil jsem prvek dokumentu prvku iframe (iframeDoc.documentElement) s prvkem dokumentu nového dokumentu (doc.documentElement) za použití replaceChild () metoda. Tímto způsobem budete být schopen vidět Ahoj světe! řetězec z dokumentu, který jsme vytvořili a přidali do prvku iframe.

3. DOMParser API

Jak jeho název napovídá, DOMParser API analyzuje HTML / XML řetězce do DOM dokumentů.

Nový DOMParser instance objektu lze vytvořit pomocí konstruktoru, DOMParser (). Instance obsahuje metodu nazvanou parseFromString () že provede analýzu po přijetí dvou argumentů: řetězec, který má být analyzován, a typ dokumentu, který má být vytvořen.

 window.onload = () => var parser = nový DOMParser (); var doc = parser.parseFromString ('Ahoj světe! ', "text / html"); doc.body.append ('extra text'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Ve výše uvedeném kódu, nové DOMParser instance analyzuje řetězec HTML na dokument DOM za použití parseFromString () metoda.

Potom, stejně jako v předchozím fragmentu kódu, prvek dokumentu nově vytvořeného dokumentu nahradí prvek dokumentu prvku iframe. Výsledkem je, že HTML kód v dokumentu, který jsme vytvořili, je viditelný v iframe.