Tri načina za stvaranje HTML dokumenata na letu

Izrada HTML dokumenata u hodu, s ili bez JavaScripta, ponekad je potrebno. Bilo da je cilj prikaz stranice potvrde ili iframe koji sadrži cijelu stranicu, ako je dokument dovoljno jednostavan, to može biti lako staviti zajedno i poslužiti s URL-ovima podataka ili JavaScriptom.

Ali, kako ćete to učiniti? Siguran sam da već znate kako dodati HTML u dokument pomoću JavaScripta, ali na stvoriti cijeli HTML dokument? Možda ćete biti zainteresirani za neke od metoda koje ću prikazati u nastavku, od kojih prva ne treba JavaScript!

Pokazat ću sve novostvorene dokumente u iframovima da biste ih mogli vidjeti. Međutim, možete koristiti dokumente kako god vam odgovara. Na primjer, mogu biti spremljene u bazu podataka ili putem web-usluga biti prikazan negdje drugdje.

1. URL-ovi podataka

URL-ovi podataka pružiti vam jednostavnu i učinkovitu metodu posluživanje dokumenata na web-stranici. Ako niste upoznati s njim, pročitajte naš prethodni članak o tome kako oni rade.

Uglavnom, URL-ovi podataka početi s podaci: URL shema. Slijedi sadržaj koji treba poslužiti, ispred kojih se po želji može spomenuti vrsta medija i kodiranje sadržaja.

Možda ste vidjeli slike poslužene na taj način, gdje base64 znakova dani su kao sadržaj URL-a podataka, nakon vrste medija.

Gornji kôd prikazuje PNG sliku čovjeka s emotikonima - možete ga provjeriti u pregledniku.

Slično onome kako se to radi, URL-ovi podataka također mogu posluživati ​​HTML dokumente:

 
2. DOMImplementation sučelje
 
DOMImplementation je sučelje koje može stvoriti potpuno nove dokumente koristeći ili svoj createDocument () (za XML) ili createHTMLDocument () metodu - ovisno o tome što vam je potrebno. Sučelju se pristupa putem document.implementation objekt.
 
 createHTMLDocument () način uzima jedan izborni parametar koje je naslov novog dokumenta.
 
Možeš dodajte HTML u novostvoreni dokument na isti način kao i obično: pomoću metoda kao što je dodati(), appendChild (), i druge JavaScript metode vezane uz DOM.
 
  
 
 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Pozdrav svijetu!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
U gornjem kodu, a izrađen je novi HTML dokument koristiti createHTMLDocument () metoda DOMImplementation sučelje i Pozdrav svijete! string je dodan je elementu tijela.
 
Zatim, da vidimo kako novoizrađeni dokument izgleda kad se prikaže, zamijenio sam element dokumenta u iframeu (iframeDoc.documentElement) s elementom dokumenta novog dokumenta (doc.documentElement) koristiti replaceChild () metoda. Tako ćete moći vidjeti Pozdrav svijete! niz iz dokumenta koji smo izradili i dodali u iframe.
 
 
3. DOMParser API
 
Kao što mu ime govori, DOMParser API analizira HTML / XML nizove u DOM dokumentima.
 
Novo DOMParser primjer objekta može se izraditi pomoću konstruktora, DOMParser (). Primjer drži pozvanu metodu parseFromString () da raščlanjuje nakon uzimanja dva argumenta: niz koji se raščlanjuje i vrstu dokumenta dokumenta koji će se kreirati.
 
  
 
 window.onload = () => var parser = novi DOMParser (); var doc = parser.parseFromString ('Pozdrav svijete! ', "text / html"); doc.body.append ('dodatni tekst'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
U gornjem kodu, novi DOMParser primjer analizira HTML niz na DOM dokument koristiti parseFromString () način.
 
Zatim, na isti način kao u prethodnom isječku koda, element dokumenta novostvorenog dokumenta zamjenjuje element dokumenta iframe. Kao rezultat, HTML kôd u dokumentu koji smo stvorili postaje vidljiv u iframeu.