Trys būdai HTML dokumentams sukurti skraidant

HTML dokumentų kūrimas skrendant, kartais reikalingas „JavaScript“. Ar tikslas yra rodyti patvirtinimo puslapį ar iframe, kuriame yra visas puslapis, jei dokumentas yra pakankamai paprastas, kad jį būtų lengva sujungti ir aptarnauti su duomenų URL arba „JavaScript“.

Bet kaip jūs apie tai einate? Esu tikras, kad jau žinote, kaip pridėti HTML prie dokumento, naudodami „JavaScript“ sukurti visą HTML dokumentą? Galbūt jus domina kai kurie žemiau pateikti metodai, iš kurių pirmas nereikia JavaScript!

Parodysiu visus naujai sukurtus dokumentus „iframes“ kad galėtumėte matyti juos atvaizduotus. Tačiau galite naudoti dokumentus, kurie, jūsų manymu, yra tinkami. Pavyzdžiui, jie gali būti į duomenų bazę arba siunčiami per žiniatinklio paslaugas būti kitur.

1. Duomenų URL

Duomenų URL suteikti jums paprastą ir efektyvų būdą pateikti dokumentus tinklalapyje. Jei nesate susipažinę su juo, perskaitykite mūsų ankstesnį straipsnį apie tai, kaip jie veikia.

Iš esmės duomenų URL pradėti nuo duomenys: URL schema. Tai seka turinys, prieš tai galite pasirinktinai paminėti medijos tipas ir kodavimo.

Jūs galėjote matyti tokiu būdu pateiktus vaizdus base64 simbolių pateikiami kaip duomenų URL turinys, atsižvelgiant į laikmenos tipą.

Anksčiau pateiktame kode rodomas PNG atvaizdas, kuriame yra žmogus, turintis nešiojamą kompiuterį.

Panašus kaip tai daroma, duomenų URL taip pat gali pateikti HTML dokumentus:

Iframe pateikia HTML dokumentą kuri buvo pridėta naudojant duomenų URL, kuriame yra text / html medijos tipas ir HTML kodas.

Toliau galite redaguoti „Codepen“ demonstraciją pridėdami papildomų HTML, jei norite pamatyti, kaip veikia technika.

2. DOMIįgyvendinimo sąsaja

DOMĮgyvendinimas yra sąsaja, kuri gali sukurti naujus dokumentus naudojant savo createDocument () (XML) arba createHTMLDokuments () metodas, kuris jums reikalingas. Sąsajai pasiekiama naudojant document.implementation objektą.

The createHTMLDokuments () metodas yra vienas pasirinktinis parametras kuris yra naujo dokumento pavadinimas.

Tu gali pridėti HTML į naujai sukurtą dokumentą taip pat, kaip paprastai: naudodami tokius metodus kaip pridėti (), pridėtiChild (), ir kiti su „DOM“ susiję „JavaScript“ metodai.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append („Sveikas pasaulis!“); var iframeDoc = document.querySelector („iframe“). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Aukščiau pateiktame kode a sukuriamas naujas HTML dokumentas naudojant createHTMLDokuments () metodas DOMĮgyvendinimas sąsaja ir Labas pasauli! eilutė yra prie kūno elemento.

Tada, norėdami pamatyti, kaip naujai sukurtas dokumentas atrodo, kai jis pateikiamas, aš pakeisiu iframe dokumento elementą (iframeDoc.documentElement) su naujo dokumento dokumento elementu (doc.documentElement) naudojant pakeistiChild () metodas. Tokiu būdu, jūs matyti Labas pasauli! eilutė iš dokumento, kurį sukūrėme ir įtraukėme į iframe.

3. DOMParser API

Kaip rodo jo pavadinimas, DOMParser API analizuoja HTML / XML eilutes į DOM dokumentus.

Naujas DOMParser objekto pavyzdys gali būti sukurta naudojant jo konstruktorių, DOMParser (). Pavyzdžiui, yra vadinamas metodas parseFromString () kad analizuoja po dviejų argumentų: eilutė, kuri bus apdorojama, ir dokumento tipas, kurį norite sukurti.

 window.onload = () => var parser = naujas DOMParser (); var doc = parser.parseFromString ('Labas pasauli! ', "text / html"); doc.body.append („papildomas tekstas“); var iframeDoc = document.querySelector („iframe“). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Minėtame kode - naujas DOMParser instancija analizuoja HTML eilutę į DOM dokumentą naudojant parseFromString () metodas.

Tada, kaip ir ankstesniame kodo fragmente, naujai sukurto dokumento dokumento elementas pakeičia iframe dokumento elementą. Todėl sukurto dokumento HTML kodas bus matomas iframe.