Drie manieren om HTML-documenten on the fly te maken

HTML-documenten direct creëren, met of zonder JavaScript, is soms noodzakelijk. Of het doel nu is om een ​​bevestigingspagina of een iframe met een hele pagina weer te geven, als het document eenvoudig genoeg is, kan het eenvoudig zijn samengebracht en geserveerd met gegevens-URL's of JavaScript.

Maar hoe pak je het aan? Ik weet zeker dat je al weet hoe je HTML kunt toevoegen aan een document met behulp van JavaScript, maar aan maak een heel HTML-document aan? Mogelijk bent u geïnteresseerd in een aantal methoden die ik hieronder zal laten zien, waarvan de eerste zelfs geen JavaScript nodig heeft!

Ik zal alle nieuw gecreëerde documenten tonen in iframes zodat je ze kon laten weergeven. U kunt de documenten echter gebruiken zoals u wilt. Dat kunnen ze bijvoorbeeld zijn opgeslagen in een database of verzonden via webservices ergens anders worden weergegeven.

1. Gegevens-URL's

Gegevens-URL's biedt u een eenvoudige en effectieve methode om dienen documenten op een webpagina. Als je er niet bekend mee bent, lees dan ons vorige artikel over hoe ze werken.

Kort gezegd, data-URL's begin met de gegevens: URL-schema. Het wordt gevolgd door de inhoud die wordt geserveerd, Waarna u eventueel de mediatype en de codering van de inhoud.

Misschien heb je afbeeldingen op deze manier gezien, waar base64 tekens worden gegeven als de inhoud van de gegevens-URL, na een mediatype.

De bovenstaande code geeft een PNG-afbeelding weer van de man met een laptop-emoji - u kunt deze in uw browser controleren.

Vergelijkbaar met hoe dit is gebeurd, gegevens-URL's kunnen ook HTML-documenten dienen:

Het iframe rendert het HTML-document die is toegevoegd met de gegevens-URL die de bevat text / html mediatype en gevolgd door de HTML-code.

Je kunt de onderstaande demo van Codepen bewerken door er extra HTML aan toe te voegen als je wilt zien hoe de techniek werkt.

2. DOMImplementatie-interface

DOMImplementation is een interface die dat kan maak gloednieuwe documenten het gebruiken van zijn createDocument () (voor XML) of createHTMLDocument () methode - welke je ook maar nodig hebt. De interface is toegankelijk via de document.implementation voorwerp.

De createHTMLDocument () methode neemt een optionele parameter welke is de titel van het nieuwe document.

Jij kan HTML toevoegen aan een nieuw document op dezelfde manier als gewoonlijk: met behulp van methoden zoals toevoegen (), appendChild (), en andere DOM-gerelateerde JavaScript-methoden.

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

In de bovenstaande code, a nieuw HTML-document is gemaakt de ... gebruiken createHTMLDocument () methode van de DOMImplementation interface en de Hallo Wereld! string is toegevoegd aan zijn lichaamsdeel.

Om vervolgens te zien hoe het document dat is gemaakt, eruitziet wanneer het wordt weergegeven, heb ik het documentelement van het iframe vervangen (iframeDoc.documentElement) met het documentelement van het nieuwe document (doc.documentElement) de ... gebruiken replaceChild () methode. Op deze manier zul je in staat zijn om het te zien Hallo Wereld! draad van het document dat we hebben gemaakt en toegevoegd aan het iframe.

3. DOMParser API

Zoals de naam al doet vermoeden, de DOMParser API parseert HTML / XML-strings in DOM-documenten.

Een nieuw DOMParser object instantie kan worden gemaakt met behulp van de constructor, DOMParser (). De instantie bevat een methode genaamd parseFromString () dat doet de ontleding na het nemen van twee argumenten: de tekenreeks die moet worden geparseerd en het documenttype van het document dat moet worden gemaakt.

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

In de bovenstaande code een nieuwe DOMParser aanleg parseert een HTML-string naar een DOM-document de ... gebruiken parseFromString () methode.

Vervolgens, op dezelfde manier als in het vorige codefragment, het documentelement van het nieuw gemaakte document vervangt het documentelement van het iframe. Als gevolg hiervan wordt de HTML-code in het document dat we hebben gemaakt zichtbaar in het iframe.