Tre modi per creare documenti HTML al volo

Creazione di documenti HTML al volo, con o senza JavaScript, a volte è necessario. Se l'obiettivo è visualizzare una pagina di riconoscimento o un iframe contenente un'intera pagina, se il documento è abbastanza semplice può essere facilmente mettere insieme e servito con entrambi gli URL di dati o JavaScript.

Ma come lo fai? Sono sicuro che sai già come aggiungere HTML a un documento usando JavaScript, ma a 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 salvato in un database o inviato attraverso servizi web essere reso da qualche altra parte.

1. URL dei dati

URL di dati fornirti 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, URL di dati inizia con dati: Schema URL. È seguito dal contenuto da servire, prima di cui si può opzionalmente menzionare il tipo di supporto e il codifica del contenuto.

Potresti aver visto le immagini servite in questo modo, dove caratteri base64 sono indicati 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.

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

L'iframe rende il documento HTML che è stato aggiunto utilizzando l'URL dei dati contenente il text / html tipo di supporto 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 che può creare documenti nuovi di zecca usando entrambi i suoi createDocument () (per XML) o createHTMLDocument () metodo, a seconda di ciò che ti serve. Si accede all'interfaccia usando il document.implementation oggetto.

Il createHTMLDocument () metodo prende un parametro opzionale qual è titolo del nuovo documento.

Puoi aggiungi HTML a un documento appena creato nello stesso modo in cui lo fai normalmente: usando metodi come aggiungere(), 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, a viene creato un nuovo documento HTML usando il createHTMLDocument () metodo del DOMImplementation interfaccia e il Ciao mondo! la stringa è aggiunto al suo elemento del corpo.

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 replaceChild () metodo. In questo modo, lo farai essere in grado di vedere il Ciao mondo! stringa dal documento che abbiamo creato e aggiunto all'iframe.

3. API DOMParser

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

Una nuova DOMParser istanza di oggetto può essere creato usando il suo costruttore, DOMParser (). L'istanza contiene un metodo chiamato parseFromString () quello 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 ('Ciao mondo! ', "text / html"); doc.body.append ('extra text'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Nel codice sopra, un nuovo DOMParser esempio analizza una stringa HTML in un documento DOM usando il parseFromString () metodo.

Quindi, allo stesso modo del frammento di codice precedente, l'elemento del 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.