Három út a HTML dokumentumok létrehozásához a repülés során

HTML dokumentumok létrehozása a repülés közben, vagy JavaScript nélkül, néha szükség van. Az, hogy a cél egy-egy nyugtázó lapot vagy egy teljes oldalt tartalmazó iframe-t jelenítsen meg, ha a dokumentum elég egyszerű, könnyen összeállítani és szolgáltatni vagy adat URL-ekkel vagy JavaScript-lel.

De hogyan jársz el? Biztos vagyok benne, hogy már tudja, hogyan kell HTML-t hozzáadni egy dokumentumhoz a JavaScript használatával, hanem a hozzon létre egy teljes HTML dokumentumot? Lehet, hogy érdeklődik az alábbiakban bemutatott módszerek közül, amelyek közül az első nem is szükséges JavaScript!

Megmutatom az újonnan létrehozott dokumentumokat iframesben hogy láthassa őket. Ugyanakkor a dokumentumokat is használhatja. Például lehetnek egy adatbázisba mentve vagy webes szolgáltatások között máshol.

1. Adat URL-ek

Adat URL-ek egyszerű és hatékony módszert biztosít Önnek a dokumentumokat weblapon. Ha nem ismeri, olvassa el az előző cikkünket arról, hogyan működik.

Alapvetően az adat URL-ek kezdje a adat: URL-séma. Ezt követi a szolgáltatást, amely előtt adott esetben megemlítheti a média típus és a a tartalom kódolása.

Talán láttál ilyen módon szolgáltatott képeket, hol base64 karakter az adathordozó típusát követő adat URL tartalmaként adják meg.

A fenti kód PNG-képet jelenít meg a laptop emoji-val rendelkező emberéről - ellenőrizheti a böngészőben.

Hasonlóan ahhoz, ahogy ez történik, az adat URL-ek HTML-dokumentumokat is szolgáltathatnak:

 
2. DOMI implementációs felület
 
DOMImplementation egy interfész, amely képes új dokumentumokat hozhat létre vagy a createDocument () (XML esetén) vagy createHTMLDocument () módszer - melyik szükséges. Az interfész a document.implementation tárgy.
 
A createHTMLDocument () eljárás egy opcionális paramétert vesz fel ami a az új dokumentum címe.
 
tudsz HTML-t adjon hozzá egy újonnan létrehozott dokumentumhoz ugyanúgy, mint általában: olyan módszerekkel, mint a append (), AppendChild (), és egyéb DOM-hoz kapcsolódó JavaScript-módszerek.
 
  
 
 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
A fenti kódban a új HTML-dokumentum jön létre használni a createHTMLDocument () módszer DOMImplementation és a Helló Világ! a string hozzáadódik a test eleméhez.
 
Ezután az újonnan létrehozott dokumentum megjelenítésének megjelenítéséhez, az iframe dokumentumelemét helyettesítettem (iframeDoc.documentElement) az új dokumentum dokumentumelemével (doc.documentElement) használni a replaceChild () eljárás. Így leszel látni kell Helló Világ! húr az általunk létrehozott és az iframe-hoz hozzáadott dokumentumból.
 
 
3. DOMParser API
 
Ahogy a neve is sugallja, a DOMParser API elemzi a HTML / XML karakterláncokat a DOM dokumentumokba.
 
Új DOMParser objektumpéldány a konstruktor segítségével hozható létre, DOMParser (). A példánynak van egy hívott módszere parseFromString () hogy az elemzést két érv elfogadása után végezzük: az elemezni kívánt karakterlánc és a létrehozandó dokumentum dokumentum típusa.
 
  
 
 window.onload = () => var parser = új DOMParser (); var doc = parser.parseFromString ('Helló Világ! ', "text / html"); doc.body.append ('extra szöveg'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  
 
A fenti kódban új DOMParser példa elemzi a HTML-karakterláncot egy DOM-dokumentumhoz használni a parseFromString () eljárás.
 
Ezután ugyanúgy, mint az előző kódrészletben, az újonnan létrehozott dokumentum dokumentumeleme az iframe dokumentumelemét helyettesíti. Ennek eredményeként a létrehozott dokumentum HTML-kódja megjelenik az iframe-ben.