Kolm võimalust HTML-dokumentide loomiseks lennul

HTML-dokumentide loomine lennult, mõnikord on vajalik JavaScript. Kas eesmärk on kuvada kinnitusleht või iframe, mis sisaldab tervet lehte, kui dokument on piisavalt lihtne, et seda on lihtne koostada ja kätte toimetada kas andmete URL-ide või JavaScriptiga.

Aga kuidas sa sellega edasi lähed? Olen kindel, et juba teate, kuidas lisada HTML-i dokumendile, kasutades JavaScripti luua terve HTML-dokument? Võib-olla olete huvitatud mõnest allpool toodud meetodist, millest esimene ei vaja isegi JavaScripti!

Ma näitan kõiki äsja loodud dokumente iframes et saaksite neid näha. Kuid saate kasutada ka dokumente, mida näete sobivaks. Näiteks võivad nad olla salvestatakse andmebaasi või veebiteenuste kaudu kusagil mujal.

1. Andmete URL-id

Andmete URL-id pakkuda teile lihtsat ja tõhusat meetodit dokumente veebisaidil. Kui te pole sellega kursis, lugege meie eelmist artiklit, kuidas nad töötavad.

Põhimõtteliselt on andmete URL-id alusta andmed: URL-i skeem. Sellele järgneb sisu, enne mida võib soovi korral mainida meediumi tüüp ja sisu kodeerimine.

Sa oleksid näinud pilte, mis on sellisel viisil teenitud base64 tähemärki on antud meediumitüübile järgneva URL-i sisuna.

Ülaltoodud kood näitab PNG-kujutist sülearvuti emoji-mehest, mida saate oma brauseris kontrollida.

Sarnaselt sellega, kuidas seda tehakse, andmete URL-id võivad olla ka HTML-dokumente:

Iframe muudab HTML-dokumendi see, mis lisati text / html meediumitüüp & HTML-kood.

Allpool saate redigeerida Codepeni demot, lisades sellele täiendava HTML-i, kui soovite näha, kuidas tehnika töötab.

2. DOMI-rakenduse liides

DOMi rakendamine on liides, mida saab luua uusi dokumente kasutades oma createDocument () (XML jaoks) või createHTMLDocument () meetodit, olenevalt sellest, kumb on vajalik. Liidese juurde pääseb dokumendi rakendamine objekti.

The createHTMLDocument () meetod võtab ühe valikulise parameetri mis on uue dokumendi pealkiri.

Sa saad lisage uuele dokumendile HTML samamoodi nagu tavaliselt: kasutades selliseid meetodeid nagu lisa (), lisageChild (), ja muud DOMiga seotud JavaScript-meetodid.

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

Ülaltoodud koodis a luuakse uus HTML-dokument kasutades createHTMLDocument () meetod DOMi rakendamine liides ja Tere, Maailm! string on lisatakse oma kehaelemendile.

Seejärel, et näha, kuidas äsja loodud dokument näeb välja, kui see on tehtud, asendasin ma iframe dokumendi elemendi (iframeDoc.documentElement) uue dokumendi dokumendi elemendiga (doc.documentElement) kasutades asendageLaste () meetod. Nii saate suutma näha Tere, Maailm! string dokumendist, mille me loonud ja lisatakse iframe'ile.

3. DOMParser API

Nagu nimigi ütleb, on DOMParser API analüüsib HTML / XML stringe DOM dokumentidesse.

Uus DOMParser objekti näide saab luua oma konstruktori abil, DOMParser (). Näiteks omab kutsutud meetodit parseFromString () seda analüüsib pärast kahte argumenti: koostatav string ja koostatava dokumendi tüüp.

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

Ülaltoodud koodis uus DOMParser näiteks analüsib HTML-stringi DOM-dokumendiga kasutades parseFromString () meetod.

Seejärel, samamoodi nagu eelmises koodilõigas, äsja loodud dokumendi elemendi element asendab iframe dokumendielementi. Selle tulemusena ilmub loodud dokumendi HTML-kood iframes.