Kolme tapaa luoda HTML-dokumentteja lennolla

HTML-asiakirjojen luominen lennossa, joskus JavaScriptin kanssa tai ilman sitä, on joskus tarpeen. Onko tavoitteena näyttää kuittaussivu tai iframe, joka sisältää koko sivun, jos asiakirja on tarpeeksi yksinkertainen, se voidaan helposti koota ja tarjoillaan joko URL-osoitteita tai JavaScriptiä.

Mutta miten voit mennä siihen? Olen varma, että tiedät jo, miten HTML-tiedosto lisätään asiakirjaan JavaScriptin avulla luo koko HTML-dokumentti? Saatat olla kiinnostunut joistakin alla esitetyistä menetelmistä, joista ensimmäinen ei tarvitse edes JavaScriptiä!

Näytän kaikki äskettäin luodut asiakirjat iframeissa jotta voisit nähdä ne renderoiduksi. Voit kuitenkin käyttää asiakirjoja, jotka eivät näy. He voivat esimerkiksi olla tallennetaan tietokantaan tai lähetetään Web-palveluiden kautta muualla.

1. Tietojen URL-osoitteet

Tietojen URL-osoitteet antaa sinulle yksinkertaisen ja tehokkaan menetelmän toimittaa asiakirjoja verkkosivulle. Jos et tunne sitä, lue edellinen artikkeli siitä, miten ne toimivat.

Periaatteessa datan URL-osoitteet aloita tiedot: URL-järjestelmä. Sitä seuraa sisältöä, ennen jota voit valinnaisesti mainita mediatyyppi ja sisällön koodaus.

Olet ehkä nähnyt tällä tavalla palvelevia kuvia, missä base64-merkkiä annetaan URL-osoitteen sisällönä mediatyypin mukaan.

Yllä oleva koodi näyttää PNG-kuvan miehestä, jolla on kannettavan tietokoneen emoji - voit tarkistaa sen selaimessasi.

Samanlainen kuin tämä tehdään, datan URL-osoitteet voivat myös palvella HTML-dokumentteja:

Iframe tekee HTML-asiakirjan joka on lisätty käyttämällä URL-osoitetta, joka sisältää text / html mediatyyppi & HTML-koodi.

Voit muokata alla olevaa Codepen-demoa lisäämällä siihen lisää HTML-koodia, jos haluat nähdä, miten tekniikka toimii.

2. DOMIm implementation -liitäntä

DOMImplementation on liitäntä, joka voi luoda uusia asiakirjoja käyttämällä joko sen createDocument () (XML: lle) tai createHTMLDocument () menetelmä, kumpi tarvitset. Käyttöliittymää käytetään document.implementation esine.

createHTMLDocument () menetelmä ottaa yhden valinnaisen parametrin kumpi on uuden asiakirjan otsikko.

Sinä pystyt lisää HTML-tiedosto hiljattain luotuun asiakirjaan samalla tavalla kuin yleensä: käyttämällä menetelmiä, kuten liittää (), AppendChild (), ja muut DOM: iin liittyvät JavaScript-menetelmät.

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

Yllä olevassa koodissa a uusi HTML-asiakirja luodaan käyttämällä createHTMLDocument () menetelmän DOMImplementation käyttöliittymä ja Hei maailma! merkkijono on lisätään sen vartaloelementtiin.

Jos haluat nähdä, miten äskettäin luotu asiakirja näyttää, kun se on tehty, korvattiin iframe-dokumentin elementti (iframeDoc.documentElement) uuden asiakirjan asiakirjan osaan (doc.documentElement) käyttämällä replaceChild () menetelmä. Näin voit voi nähdä Hei maailma! jono luodusta asiakirjasta ja lisättiin iframe-tiedostoon.

3. DOMParser API

Kuten sen nimi viittaa, DOMParser API jäsentää HTML / XML-merkkijonot DOM-dokumentteihin.

Uusi DOMParser objektin esimerkki voidaan luoda käyttämällä sen rakentajaa, DOMParser (). Esimerkissä on menetelmä, jota kutsutaan parseFromString () että tekee jäsentämisen kahden argumentin ottamisen jälkeen: jäsennettävä merkkijono ja luotavan asiakirjan tyyppi.

 window.onload = () => var parser = uusi DOMParser (); var doc = parser.parseFromString ('Hei maailma! ', "text / html"); doc.body.append ('ylimääräinen teksti'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Yllä olevassa koodissa uusi DOMParser ilmentymä jäsentää HTML-merkkijonon DOM-dokumenttiin käyttämällä parseFromString () menetelmä.

Sitten samalla tavalla kuin edellisessä koodinpätkässä, juuri luodun asiakirjan dokumenttielementti korvaa iframen asiakirjan osan. Tämän seurauksena luodun asiakirjan HTML-koodi tulee näkyviin iframe-muodossa.