Три начина за креирање ХТМЛ докумената на лету

Креирање ХТМЛ докумената у ходу, са или без ЈаваСцрипт-а, понекад је потребно. Било да је циљ да се прикаже страница потврде или ифраме који садржи целу страницу, ако је документ довољно једноставан, то може бити лако ставити заједно и послужити са УРЛ-овима података или ЈаваСцрипт-ом.

Али, како то иде? Сигуран сам да већ знате како да додате ХТМЛ у документ користећи ЈаваСцрипт, али да направите читав ХТМЛ документ? Можда ћете бити заинтересовани за неке од метода које ћу приказати у наставку, од којих прва не треба ЈаваСцрипт!

Показаћу све новостворене документе у ифрамес да бисте могли да их видите. Међутим, можете користити документе како год вам одговара. На пример, могу бити у базу података или преко веб сервиса да се прикаже негде другде.

1. УРЛ адреса података

УРЛ-ови података пружити вам једноставан и ефикасан метод слање докумената на веб страници. Ако нисте упознати с њим, прочитајте наш претходни чланак о томе како они раде.

У основи, УРЛ-ови података почети са подаци: УРЛ шема. Прати га садржај који ће бити послужен, испред којих се по жељи може поменути врста медија анд тхе кодирање садржаја.

Можда сте видели слике које су служиле на овај начин, где басе64 цхарацтерс се дају као садржај УРЛ-а података, након врсте медија.

Горњи код приказује ПНГ слику човека са емотиконима лаптопа - можете га проверити у прегледачу.

Слично ономе како се то ради, УРЛ-ови података такође могу послужити ХТМЛ документима:

Тхе ифраме приказује ХТМЛ документ која је додата помоћу УРЛ-а података који садржи тект / хтмл тип медија и ХТМЛ код.

Доље можете уредити демо Цодепен тако што ћете му додати додатни ХТМЛ ако желите да видите како ова техника функционише.

2. ДОМИмплементатион интерфејс

ДОМИмплементатион је интерфејс који може креирајте потпуно нове документе користећи или своје цреатеДоцумент () (за КСМЛ) или цреатеХТМЛДоцумент () методу - који год вам је потребан. Приступ интерфејсу се врши помоћу доцумент.имплементатион објекат.

Тхе цреатеХТМЛДоцумент () метода узима један опциони параметар који је наслов новог документа.

Можете додајте ХТМЛ у ново креирани документ на исти начин као и обично: помоћу метода као што је додати(), аппендЦхилд (), и друге ЈаваСцрипт-методе везане за ДОМ.

 виндов.онлоад = () => вар доц = доцумент.имплементатион.цреатеХТМЛДоцумент (); доц.боди.аппенд ('Хелло Ворлд!'); вар ифрамеДоц = доцумент.куериСелецтор ('ифраме'). цонтентДоцумент; ифрамеДоц.реплацеЦхилд (доц.доцументЕлемент, ифрамеДоц.доцументЕлемент);  

У горњем коду, а креиран је нови ХТМЛ документ помоћу цреатеХТМЛДоцумент () метода ДОМИмплементатион интерфејс и Здраво Свете! стринг ис додан у његов елемент тела.

Затим, да видим како нови документ изгледа када се прикаже, заменио сам елемент документа у ифраме-у (ифрамеДоц.доцументЕлемент) са елементом документа новог документа (доц.доцументЕлемент) помоћу реплацеЦхилд () метода. Овуда, ви ћете моћи да видите Здраво Свете! низ из документа који смо креирали и додали у ифраме.

3. ДОМПарсер АПИ

Као што и само име каже ДОМПарсер АПИ анализира ХТМЛ / КСМЛ стрингове у ДОМ документима.

А нев ДОМПарсер инстанца објекта може се креирати помоћу конструктора, ДОМПарсер (). Инстанца држи позван метод парсеФромСтринг () то врши парсирање након што узме два аргумента: стринг који се анализира и тип документа документа који треба креирати.

 виндов.онлоад = () => вар парсер = нови ДОМПарсер (); вар доц = парсер.парсеФромСтринг ('Здраво Свете! ', "тект / хтмл"); доц.боди.аппенд ('додатни текст'); вар ифрамеДоц = доцумент.куериСелецтор ('ифраме'). цонтентДоцумент; ифрамеДоц.реплацеЦхилд (доц.доцументЕлемент, ифрамеДоц.доцументЕлемент);  

У горњем коду, нови ДОМПарсер пример анализира ХТМЛ низ на ДОМ документ помоћу парсеФромСтринг () метода.

Затим, на исти начин као у претходном исјечку кода, елемент документа у новоствореном документу замењује елемент документа у ифрамеу. Као резултат, ХТМЛ код у документу који смо креирали постаје видљив у ифраме-у.