Tre måter å lage HTML-dokumenter på fly

Opprette HTML-dokumenter på farten, med eller uten JavaScript, er noen ganger nødvendig. Om målet er å vise en bekreftelsesside eller en iframe som inneholder en hel side, hvis dokumentet er enkelt nok, kan det være lett satt sammen og servert med enten data-nettadresser eller JavaScript.

Men hvordan går det med det? Jeg er sikker på at du allerede vet hvordan du legger til HTML i et dokument ved hjelp av JavaScript, men til lag et hel HTML-dokument? Du kan være interessert i noen av metodene jeg vil vise nedenfor, den første som ikke engang trenger JavaScript!

Jeg vil vise alle nyopprettede dokumenter i iframes slik at du kunne se dem gjengitt. Du kan imidlertid bruke dokumentene, men du ser det som passer. For eksempel kan de være lagret i en database eller sendt over webtjenester å bli gjengitt et annet sted.

1. Data URLer

Data-URLer gi deg en enkel og effektiv metode til servere dokumenter på en nettside. Hvis du ikke er kjent med det, les vår tidligere artikkel om hvordan de fungerer.

I utgangspunktet dataadresser begynn med data: URL-skjema. Det er etterfulgt av innhold å bli servert, før du kan valgfritt nevne Media type og koding av innholdet.

Du har kanskje sett bilder servert på denne måten, hvor base64 tegn Gis som innholdet i data-nettadressen, etter en medietype.

Koden ovenfor viser et PNG-bilde av mannen med en bærbar emoji-du kan sjekke den i nettleseren din.

Ligner på hvordan dette er gjort, Data-nettadresser kan også vise HTML-dokumenter:

Iframe gjør HTML-dokumentet som ble lagt til ved hjelp av data-nettadressen som inneholder text / html medietype og etterfulgt av HTML-koden.

Du kan redigere Codepen-demoen nedenfor ved å legge til ekstra HTML for det hvis du vil se hvordan teknikken fungerer.

2. DOMImplementeringsgrensesnitt

DOMImplementation er et grensesnitt som kan lage helt nye dokumenter bruker enten sin createDocument () (for XML) eller createHTMLDocument () metode-alt du trenger. Grensesnittet er tilgjengelig ved hjelp av document.implementation gjenstand.

De createHTMLDocument () metode tar en valgfri parameter hvilken er den tittel på det nye dokumentet.

Du kan legg til HTML til et nylig opprettet dokument På samme måte som du vanligvis gjør: ved å bruke metoder som føye (), appendChild (), og andre DOM-relaterte JavaScript-metoder.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

I koden ovenfor, a nytt HTML-dokument er opprettet bruker createHTMLDocument () metode av DOMImplementation grensesnitt og Hei Verden! streng er lagt til kroppens element.

Så, for å se hvordan det nylig opprettede dokumentet ser ut når det blir gjort, erstattet jeg dokumentelementet til iframe (iframeDoc.documentElement) med dokumentelementet i det nye dokumentet (doc.documentElement) bruker replaceChild () metode. På denne måten vil du kunne se Hei Verden! string fra dokumentet vi opprettet og lagt til iframe.

3. DOMParser API

Som navnet antyder, den DOMParser API analyserer HTML / XML-strenger i DOM-dokumenter.

En ny DOMParser objekt forekomst kan opprettes ved hjelp av sin konstruktør, DOMParser (). Eksemplet inneholder en metode som kalles parseFromString () at analyserer etter to argumenter: Strengen som skal analyseres og dokumenttypen til dokumentet som skal opprettes.

 window.onload = () => var parser = ny DOMParser (); var doc = parser.parseFromString ('Hei Verden! ',' text / html '); doc.body.append ('ekstra tekst'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

I ovennevnte kode, en ny DOMParser forekomst analyserer en HTML-streng til et DOM-dokument bruker parseFromString () metode.

Deretter, på samme måte som i forrige kodebit, dokumentelementet til det nylig opprettede dokumentet erstatter dokumentelementet til iframe. Som et resultat blir HTML-koden i dokumentet vi opprettet, synlig i iframe.