Tre måder at oprette HTML-dokumenter på flyve

Oprettelse af HTML-dokumenter på flugt, med eller uden JavaScript, er nogle gange nødvendigt. Hvorvidt målet er at vise en bekræftelsesside eller en iframe, der indeholder en hel side, hvis dokumentet er simpelt nok, kan det nemt sammensættes og serveres med enten data-URL'er eller JavaScript.

Men hvordan går det med det? Jeg er sikker på, at du allerede ved, hvordan man tilføjer HTML til et dokument ved hjælp af JavaScript, men til lav et hel HTML-dokument? Du kan være interesseret i nogle af de metoder, jeg vil vise nedenfor, hvoraf den første ikke har brug for JavaScript!

Jeg vil vise alle de nyoprettede dokumenter i iframes så du kunne se dem gengivet. Du kan dog bruge dokumenterne, men du finder det passende. For eksempel kan de være gemt i en database eller sendt på tværs af webtjenester at blive gengivet et andet sted.

1. Data-URL'er

Data-URL'er give dig en enkel og effektiv metode til at servere dokumenter på en webside. Hvis du ikke er bekendt med det, læs vores tidligere artikel om hvordan de virker.

Dybest set data-URL'er start med data: URL-ordningen. Det efterfølges af indhold, der skal serveres, inden for hvilket du eventuelt kan nævne medietype og kodning af indholdet.

Du har måske set billeder tjent på denne måde, hvor base64 tegn er angivet som indholdet af data-URL'en efter en medietype.

Ovenstående kode viser et PNG-billede af manden med en bærbar emoji-du kan tjekke den i din browser.

Ligner hvordan dette gøres, Data-URL'er kan også vise HTML-dokumenter:

Iframe gør HTML-dokumentet som blev tilføjet ved hjælp af data-URL'en indeholdende text / html medietype & efterfulgt af HTML-koden.

Du kan redigere Codepen demo nedenfor ved at tilføje ekstra HTML til det, hvis du vil se, hvordan teknikken virker.

2. DOMImplementation interface

DOMImplementation er en grænseflade, der kan Opret helt nye dokumenter bruger enten dens createDocument () (for XML) eller createHTMLDocument () metode - alt efter hvad du har brug for. Grænsefladen er tilgængelig ved hjælp af document.implementation objekt.

Det createHTMLDocument () metode tager en valgfri parameter hvilket er titel på det nye dokument.

Du kan Tilføj HTML til et nyoprettet dokument på samme måde som du normalt gør: ved at bruge metoder som f.eks Tilføj(), appendChild (), og andre DOM-relaterede 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 nyt HTML-dokument er oprettet bruger createHTMLDocument () metode af DOMImplementation interface og Hej Verden! streng er føjet til dets kropsdel.

Så for at se, hvordan det nyoprettede dokument ser ud, når det bliver gengivet, erstattede jeg dokumentets element i iframe (iframeDoc.documentElement) med dokumentelementet i det nye dokument (doc.documentElement) bruger replaceChild () metode. På den måde vil du kunne se Hej Verden! snor fra det dokument, vi oprettede og tilføjede til iframe.

3. DOMParser API

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

En ny DOMParser objekt eksempel kan oprettes ved hjælp af sin konstruktør, DOMParser (). Eksemplet indeholder en kaldet metode parseFromString () at analyserer efter to argumenter: den streng, der skal analyseres, og dokumenttypen for det dokument, der skal oprettes.

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

I ovenstående kode er en ny DOMParser instans analyserer en HTML-streng til et DOM-dokument bruger parseFromString () metode.

Derefter, på samme måde som i det forrige kodestykke, dokumentelementet i det nyoprettede dokument erstatter dokumentelementet i iframe. Som følge heraf bliver HTML-koden i det dokument, vi oprettede, synlig i iframe.