Trije načini za ustvarjanje dokumentov HTML na letalu

Ustvarjanje dokumentov HTML v teku, z ali brez JavaScripta, je včasih potrebno. Ali je cilj prikazati potrditveno stran ali iframe, ki vsebuje celo stran, če je dokument dovolj preprost, je lahko enostavno skupaj z vnosom podatkov URL ali JavaScript.

Ampak, kako to storite? Prepričan sem, da že veste, kako dodati HTML v dokument z uporabo JavaScripta, vendar do ustvarite celoten dokument HTML? Morda vas bodo zanimale nekatere metode, ki jih bom prikazal spodaj, pri čemer prvi ne potrebuje JavaScripta!

Prikazal bom vse novonastale dokumente v okvirjih da jih lahko vidite. Vendar pa lahko uporabite dokumente, vendar se vam zdi primerno. Lahko so na primer shranjene v zbirko podatkov ali prek spletnih storitev biti prikazan nekje drugje.

1. URL-ji podatkov

URL-ji podatkov vam zagotovimo preprosto in učinkovito metodo vročanje dokumentov na spletni strani. Če tega ne poznate, preberite naš prejšnji članek o tem, kako delujejo.

V bistvu, podatkovni URL-ji začnite z podatki: Shema URL. Sledi vsebino, pred katerim lahko po želji navedete vrsto medija in kodiranje vsebine.

Morda ste videli slike, ki so služile na ta način, kje base64 znakov so navedeni kot vsebina URL-ja podatkov, ki sledi vrsti medija.

Zgornja koda prikazuje sliko PNG človeka s čustvenim simbolom prenosnega računalnika, ki ga lahko preverite v brskalniku.

Podobno kot je to storjeno, URL-ji podatkov lahko služijo tudi za dokumente HTML:

Iframe prikaže dokument HTML , ki je bila dodana z uporabo URL-ja podatkov, ki vsebuje text / html vrsto medija in sledi koda HTML.

Spodnji del Codepen lahko uredite tako, da mu dodate dodatni HTML, če želite videti, kako deluje tehnika.

2. Vmesnik DOMImplementation

Izvajanje DOMI je vmesnik, ki lahko ustvarite popolnoma nove dokumente z uporabo svoje createDocument () (za XML) ali createHTMLDocument () metodo, kar potrebujete. Do vmesnika dostopate s pomočjo izvajanje predmet.

The createHTMLDocument () metodo traja en neobvezen parameter ki je naslov novega dokumenta.

Ti lahko dodajte HTML v novonastali dokument na enak način, kot običajno: z metodami, kot je append (), appendChild (), in druge metode JavaScript, povezane z 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);  

V zgornji kodi a Ustvari se nov dokument HTML uporabljati createHTMLDocument () metodo. \ t Izvajanje DOMI vmesnik in Pozdravljen, svet! niz je dodan elementu telesa.

Potem, da vidim, kako izgleda novonastali dokument, ko je upodobljen, sem zamenjal element dokumenta v iframeu (iframeDoc.documentElement) z elementom dokumenta novega dokumenta (doc.documentElement) uporabljati replaceChild () metodo. Tako boste lahko vidite Pozdravljen, svet! niz iz dokumenta, ki smo ga izdelali in dodali v iframe.

3. API DOMParser

Kot že ime pove, DOMParser API razčleni nizove HTML / XML v dokumente DOM.

Novo DOMParser primer objekta lahko ustvarite s svojim konstruktorjem, DOMParser (). Primer vsebuje izbrano metodo parseFromString () to razčleni po dveh argumentih: niz, ki ga želite razčleniti, in vrsto dokumenta dokumenta, ki ga želite ustvariti.

 window.onload = () => var parser = novi DOMParser (); var doc = parser.parseFromString ('Pozdravljen, svet! ', "text / html"); doc.body.append ('dodatno besedilo'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

V zgornji kodi je nova DOMParser na primer razčleni niz HTML v dokument DOM uporabljati parseFromString () metodo.

Nato na enak način kot v prejšnjem odlomku kode element elementa na novo ustvarjenega dokumenta nadomesti element dokumenta v iframeu. Zato je koda HTML v dokumentu, ki smo ga ustvarili, vidna v iframeu.