Tre modi per creare documenti HTML al volo

Talvolta è necessario creare documenti HTML al volo, con o senza JavaScript. Se l'obiettivo è quello di visualizzare una pagina di riconoscimento o un iframe contenente un'intera pagina, se il documento è abbastanza semplice può essere facilmente assemblato e servito con gli URL di dati o JavaScript .

Ma come lo fai? Sono sicuro che sai già come aggiungere HTML a un documento utilizzando JavaScript, ma per creare un intero documento HTML ? Potresti essere interessato ad alcuni dei metodi che mostrerò qui sotto, il primo dei quali non ha nemmeno bisogno di JavaScript!

Mostrerò tutti i documenti appena creati negli iframe in modo che tu possa vederli renderizzati. Tuttavia, puoi usare i documenti come ritieni opportuno. Ad esempio, possono essere salvati in un database o inviati attraverso servizi Web per essere visualizzati altrove.

1. URL dei dati

Gli URL di dati forniscono un metodo semplice ed efficace per servire i documenti su una pagina web . Se non lo conosci, leggi il nostro precedente articolo su come funzionano.

Fondamentalmente, gli URL di dati iniziano con lo schema di data: URL . È seguito dal contenuto da servire, prima del quale puoi opzionalmente menzionare il tipo di media e la codifica del contenuto .

Potresti aver visto le immagini pubblicate in questo modo, dove i caratteri base64 sono dati come il contenuto dell'URL dei dati, seguendo un tipo di media.

Il codice sopra mostra un'immagine PNG dell'uomo con un'emoji del laptop: puoi controllarlo nel tuo browser.

Analogamente a come è fatto, gli URL di dati possono anche servire documenti HTML :

L'iframe esegue il rendering del documento HTML che è stato aggiunto utilizzando l'URL di dati contenente il tipo di supporto text/html seguito dal codice HTML.

Puoi modificare la demo di Codepen qui sotto aggiungendo un codice HTML extra se vuoi vedere come funziona la tecnica.

2. Interfaccia DOMImplementation

DOMImplementation è un'interfaccia in grado di creare nuovi documenti utilizzando il suo createDocument() (per XML) o createHTMLDocument(), a seconda delle esigenze. Si accede all'interfaccia usando l'oggetto document.implementation .

Il metodo createHTMLDocument() accetta un parametro opzionale che è il titolo del nuovo documento .

È possibile aggiungere HTML a un documento appena creato nello stesso modo in cui si fa normalmente: utilizzando metodi come append(), appendChild() e altri metodi JavaScript relativi a 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); } 

Nel codice sopra, un nuovo documento HTML viene creato utilizzando il metodo createHTMLDocument() dell'interfaccia DOMImplementation e Hello World! la stringa viene aggiunta al suo elemento body .

Quindi, per vedere come appare il documento appena creato al momento del rendering, ho sostituito l'elemento del documento dell'iframe ( iframeDoc.documentElement ) con l'elemento del documento del nuovo documento ( doc.documentElement ) usando il metodo replaceChild() . In questo modo, sarai in grado di vedere Hello World! stringa dal documento che abbiamo creato e aggiunto all'iframe.

3. API DOMParser

Come suggerisce il nome, l'API DOMParser analizza le stringhe HTML / XML nei documenti DOM .

Una nuova DOMParser dell'oggetto DOMParser può essere creata utilizzando il suo costruttore, DOMParser() . L'istanza contiene un metodo chiamato parseFromString() che esegue l'analisi dopo aver preso due argomenti : la stringa da analizzare e il tipo di documento del documento da creare.

 window.onload = () => {var parser = new DOMParser (); var doc = parser.parseFromString (' Hello World! ', "text / html"); doc.body.append ('extra text'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement); } 

Nel codice precedente, una nuova istanza DOMParser analizza una stringa HTML in un documento DOM utilizzando il metodo parseFromString() .

Quindi, allo stesso modo del frammento di codice precedente, l'elemento documento del documento appena creato sostituisce l'elemento documento dell'iframe . Di conseguenza, il codice HTML nel documento che abbiamo creato diventa visibile nell'iframe.