Tri spôsoby vytvárania dokumentov HTML na Fly

Vytváranie dokumentov HTML za behu, s alebo bez jazyka JavaScript, je niekedy potrebné. Či je cieľom zobraziť stránku s potvrdením alebo rámček obsahujúci celú stránku, ak je dokument jednoduchý, môže byť ľahko ktoré sa dajú dohromady a slúžia buď s adresami URL alebo so súborom JavaScript.

Ale ako to urobíte? Som si istý, že už viete, ako pridať HTML do dokumentu pomocou jazyka JavaScript, ale vytvorte celý dokument HTML? Mali by ste mať záujem o niektoré z metód, ktoré uvádzam nižšie, z ktorých prvý nevyžaduje JavaScript!

Ukážem všetky novo vytvorené dokumenty v rámcoch iframe aby ste ich mohli zobraziť. Môžete však použiť dokumenty, ktoré považujete za vhodné. Napríklad môžu byť uložené do databázy alebo posielané cez webové služby aby sa dal niekde inde.

1. Dátové URL

Adresy URL pre údaje poskytnúť vám jednoduchú a účinnú metódu zobrazovať dokumenty na webovej stránke. Ak nie ste s ňou oboznámení, prečítajte si náš predchádzajúci článok o tom, ako fungujú.

V zásade adresy URL s údajmi začať s údaje: Schéma URL. Je to nasledované obsah, ktorý sa má zobrazovať, pred ktorým môžete voliteľne zmieniť Typ média a kódovanie obsahu.

Možno ste videli obrazy, ktoré sa zobrazujú týmto spôsobom, kde base64 znakov sa uvádzajú ako obsah adresy URL údajov podľa typu média.

Vyššie uvedený kód zobrazuje obrázok PNG človeka s emojim notebooku - môžete ho skontrolovať vo svojom prehliadači.

Podobne ako sa to deje, webové adresy údajov môžu tiež zobrazovať dokumenty HTML:

Rámček iframe robí HTML dokument ktorý bol pridaný pomocou dátovej adresy URL obsahujúcej text / html typ média a nasleduje HTML kód.

Demo Codepen môžete upraviť nižšie pridaním ďalšieho HTML kódu, ak chcete vidieť, ako táto technika funguje.

2. Rozhranie DOMI implementácie

DOMImplementation je rozhranie, ktoré môže vytvoriť úplne nové dokumenty použitím buď jeho createDocument () (pre XML) alebo createHTMLDocument () metódu - podľa toho, čo potrebujete. Rozhranie je prístupné pomocou document.implementation objekt.

createHTMLDocument () metóda má jeden voliteľný parameter Ktoré je názov nového dokumentu.

Môžeš pridajte HTML do novo vytvoreného dokumentu rovnakým spôsobom ako obvykle: pomocou metód, ako je pripojiť (), appendChild (), a ďalšie metódy JavaScript súvisiace s DOM.

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

V uvedenom kóde sa a vytvorí sa nový HTML dokument pomocou createHTMLDocument () metóda DOMImplementation rozhranie a Dobrý deň svet! reťazec je pridané do svojho telesného elementu.

Potom, aby sme zistili, ako vyzerá novo vytvorený dokument pri vykreslení, som nahradil prvok dokumentu iframe (iframeDoc.documentElement) s dokumentovým prvkom nového dokumentu (doc.documentElement) pomocou replaceChild () metóda. Týmto spôsobom byť schopný vidieť Dobrý deň svet! povrázok z dokumentu, ktorý sme vytvorili a pridali do rámčeky iframe.

3. API DOMParser

Ako naznačuje jeho názov, DOMParser API analyzuje reťazce HTML / XML do dokumentov DOM.

Nový DOMParser objektová inštancia môže byť vytvorený pomocou jeho konštruktora, DOMParser (). Inštancia obsahuje metódu s názvom parseFromString () že robí analýzu po dvoch argumentoch: reťazec, ktorý sa má analyzovať a typ dokumentu dokumentu, ktorý sa má vytvoriť.

 window.onload = () => var parser = nový DOMParser (); var doc = parser.parseFromString ('Dobrý deň svet! ',' text / html '); doc.body.append ('extra text'); var iframeDoc = dokument.querySelector ('iframe'). iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Vo vyššie uvedenom kóde je nový DOMParser inštancie analyzuje reťazec HTML dokumentu DOM pomocou parseFromString () metóda.

Potom rovnakým spôsobom ako v predchádzajúcom útržku kódu prvok dokumentu novo vytvoreného dokumentu nahrádza prvok dokumentu iframe. V dôsledku toho sa kód HTML v dokumente, ktorý sme vytvorili, stane viditeľným v rámci iframe.