Trei moduri de a crea documente HTML pe zbor

Crearea documentelor HTML în zbor, cu sau fără JavaScript, este uneori necesar. Indiferent dacă scopul este de a afișa o pagină de confirmare sau o iframe care conține o pagină întreagă, dacă documentul este suficient de simplu, acesta poate fi ușor a pus împreună și a servit fie cu adrese URL de date, fie cu JavaScript.

Dar, cum te descurci? Sunt sigur că deja știți cum să adăugați cod HTML într-un document utilizând JavaScript, dar să creați un întreg document HTML? S-ar putea să fiți interesat de câteva dintre metodele pe care le voi arăta mai jos, dintre care primul nu are nevoie chiar de JavaScript!

Voi arăta toate documentele nou create în iframe astfel încât să le puteți vedea redate. Cu toate acestea, puteți utiliza documentele pe care le considerați potrivite. De exemplu, ele pot fi salvate într-o bază de date sau trimis prin intermediul serviciilor web să fie redat în altă parte.

1. URL-uri de date

Datele URL de date vă oferă o metodă simplă și eficientă să difuzați documente pe o pagină web. Dacă nu sunteți familiarizat cu acest lucru, citiți articolul nostru anterior despre modul în care funcționează.

În principiu, adresele URL de date începeți cu date: Schemă de adrese URL. Este urmată de conținutul care trebuie servit, înainte de care puteți menționa opțional media si codificarea conținutului.

S-ar putea să fi văzut imagini servite în acest fel, unde caractere de bază64 sunt date ca conținut al adresei de date, urmând un tip de media.

Codul de mai sus afișează o imagine PNG a omului cu un laptop emoji - îl puteți verifica în browser.

Similar cu modul în care se face acest lucru, datele URL pot să difuzeze și documente HTML:

 
Interfața de implementare DOMI
 
DOMImplementation este o interfață care poate creați documente noi folosind fie ei CreateDocument () (pentru XML) sau createHTMLDocument () metoda - indiferent de ce ai nevoie. Interfața este accesată utilizând document.implementation obiect.
 
 createHTMLDocument () metodă ia un parametru opțional care este titlul noului document.
 
Poti adăugați cod HTML la un document nou creat la fel cum procedați de obicei: utilizând metode cum ar fi adăuga(), appendChild (), și alte metode JavaScript legate de DOM.
 
  
 
 window.onload = () => var document = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ("iframe"). conținutDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
În codul de mai sus, a se creează un nou document HTML folosind createHTMLDocument () metodă a DOMImplementation și interfața Salut Lume! șirul este adăugat la elementul său de corp.
 
Apoi, pentru a vedea cum arată documentul nou creat atunci când este redat, am înlocuit elementul document al iframe-ului (iframeDoc.documentElement) cu elementul document al noului document (doc.documentElement) utilizând replaceChild () metodă. În felul ăsta, vei fi să fie capabil să vadă Salut Lume! şir din documentul pe care l-am creat și adăugat la iframe.
 
 
API-ul DOMParser
 
După cum sugerează și numele, DOMParser API-ul analizează șirurile HTML / XML în documentele DOM.
 
Un nou DOMParser obiect instanță poate fi creat folosind constructorul său, DOMParser (). Instanța deține o metodă numită parseFromString () acea analizează după ce a luat două argumente: șirul care trebuie analizat și tipul de document al documentului care urmează a fi creat.
 
  
 
 window.onload = () => var parser = nou DOMParser (); var doc = parser.parseFromString ('Salut Lume! "," text / html "); doc.body.append ("extra text"); var iframeDoc = document.querySelector ("iframe"). conținutDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
În codul de mai sus, un nou DOMParser instanță analizează un șir HTML într-un document DOM folosind parseFromString () metodă.
 
Apoi, în același mod ca și în fragmentul de cod anterior, elementul document al documentului nou creat înlocuiește elementul de document al iframe-ului. Ca rezultat, codul HTML din documentul pe care l-am creat devine vizibil în iframe.