Trīs veidi, kā izveidot HTML dokumentus par lidojumu

HTML dokumentu izveide lidojumā, dažreiz ir nepieciešams, izmantojot vai bez JavaScript. Vai mērķis ir parādīt apstiprinājuma lapu vai iframe, kas satur visu lapu, ja dokuments ir pietiekami vienkāršs, to var viegli kopā ar datu URL vai JavaScript.

Bet, kā jūs to darāt? Esmu pārliecināts, ka jūs jau zināt, kā pievienot HTML dokumentam, izmantojot JavaScript izveidojiet visu HTML dokumentu? Jūs varētu interesēt dažas no tālāk redzamajām metodēm, no kurām pirmā nav nepieciešama JavaScript!

Es parādīšu visus jaunizveidotos dokumentus iframes lai jūs varētu redzēt tos padarīt. Tomēr jūs varat izmantot dokumentus, kurus jūs redzat. Piemēram, viņi var būt saglabāts datu bāzē vai sūtīti pa interneta pakalpojumiem citur.

1. Datu URL

Datu URL nodrošināt vienkāršu un efektīvu metodi apkalpot dokumentus tīmekļa lapā. Ja neesat iepazinies ar to, izlasiet mūsu iepriekšējo rakstu par to, kā viņi strādā.

Būtībā datu URL sākt ar dati: URL shēma. Tam seko saturs, pirms kura jūs varat pieminēt multivides tips un satura kodēšana.

Jūs, iespējams, esat redzējuši attēlus šādā veidā, kur bāzes64 rakstzīmes tiek doti kā datu URL saturs pēc mediju veida.

Minētais kods parāda PNG attēlu no cilvēka ar klēpjdatora emociju, kuru varat pārbaudīt savā pārlūkprogrammā.

Līdzīgi kā tas tiek darīts, datu URL var kalpot arī HTML dokumentiem:

Iframe sniedz HTML dokumentu kas tika pievienots, izmantojot datu URL, kas satur text / html multivides tips un HTML kods.

Jūs varat rediģēt tālāk norādīto demonstrāciju, pievienojot papildus HTML, ja vēlaties redzēt, kā šī tehnika darbojas.

2. DOMIīstenošanas saskarne

DOMIīstenošana ir saskarne, kas var izveidot pavisam jaunus dokumentus izmantojot savu createDocument () (XML) vai createHTMLDokuments () metode, atkarībā no tā, kas jums nepieciešams. Saskarne ir pieejama, izmantojot document.implementation objektu.

The createHTMLDokuments () metodi ņem vienu izvēles parametru kas ir jaunā dokumenta nosaukums.

Jūs varat pievienojiet HTML jaunizveidotajam dokumentam tāpat kā parasti: izmantojot tādas metodes kā pievienot (), pievienojietChild (), un citas ar DOM saistītas JavaScript metodes.

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

Iepriekš minētajā kodā a tiek izveidots jauns HTML dokuments izmantojot createHTMLDokuments () metode DOMIīstenošana saskarne un Sveika pasaule! virkne ir tās ķermeņa elementam.

Pēc tam, lai redzētu, kā jaunizveidotais dokuments tiek atveidots, es nomainīju iframe dokumenta elementu (iframeDoc.documentElement) ar jaunā dokumenta dokumenta elementu (doc.documentElement) izmantojot aizstāt bērnu () metodi. Tādā veidā jūs varēs redzēt Sveika pasaule! virkne no dokumenta, ko izveidojām un pievienojām iframe.

3. DOMParser API

Kā norāda tā nosaukums, DOMParser API analizē HTML / XML virknes DOM dokumentos.

Jauns DOMParser objekta piemērs var izveidot, izmantojot tā konstruktoru, DOMParser (). Piemēram, tā saucas metode parseFromString () to veic analīzi pēc diviem argumentiem: iezīmējamā virkne un izveidojamā dokumenta veids.

 window.onload = () => var parser = jauns DOMParser (); var doc = parser.parseFromString ('Sveika pasaule! ', "text / html"); doc.body.append (“papildu teksts”); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Iepriekš minētajā kodā - jauns DOMParser piemēram analizē HTML virkni ar DOM dokumentu izmantojot parseFromString () metodi.

Pēc tam, tāpat kā iepriekšējā koda fragmentā, jaunizveidotā dokumenta dokumenta elements aizstāj iframe dokumenta elementu. Tā rezultātā, HTML kods HTML dokumentā, ko mēs izveidojām, kļūst redzams iframe.