Anında HTML Belgeleri Oluşturmanın Üç Yolu

Anında HTML belgeleri oluşturma, JavaScript ile veya JavaScript olmadan bazen gereklidir. Amaç bir onay sayfası mı yoksa tam sayfa içeren bir iframe mi göstermekse de, belge yeterince basitse kolayca veri URL’leri veya JavaScript’lerle bir araya getirilerek sunulabilir.

Ama nasıl gidiyorsun? JavaScript kullanarak bir belgeye HTML eklemeyi zaten bildiğinizden eminim, ancak tam bir HTML belgesi oluştur? Aşağıda göstereceğim yöntemlerden bazıları ilginizi çekebilir; bunlardan ilki JavaScript gerektirmiyor!

Yeni oluşturulan tüm belgeleri göstereceğim iframe'ler içinde Böylece onları işlenmiş olarak görebiliyordunuz. Ancak belgeleri uygun bulduğunuz şekilde kullanabilirsiniz. Örneğin, onlar olabilir veritabanına kaydedildi veya Web servislerine gönderildi başka bir yere bırakılmak.

1. Veri URL’leri

Veri URL’leri Size basit ve etkili bir yöntem sunmak web sayfasında belgeler sunma. Eğer aşina değilseniz, nasıl çalıştıklarına dair önceki makalemizi okuyun..

Temel olarak, veri URL’leri ile başla veri: URL şeması. Tarafından takip edilir sunulacak içerik, daha önce isteğe bağlı olarak ortam türü ve içeriğin kodlanması.

Bu şekilde sunulan görüntüleri görmüş olabilirsiniz. base64 karakter Bir medya türünü takip ederek veri URL’sinin içeriği olarak.

Yukarıdaki kod, dizüstü bilgisayarın emojisine sahip adamın PNG görüntüsünü gösterir - tarayıcınızda kontrol edebilirsiniz..

Bunun nasıl yapıldığına benzer, veri URL’leri ayrıca HTML belgeleri sunabilir:

İframe HTML belgesini oluşturur bu, veri içeren URL’yi kullanarak text / html ortam türü ve ardından HTML kodu.

Tekniğin nasıl çalıştığını görmek istiyorsanız, ona ilave HTML ekleyerek aşağıdaki Codepen demosunu düzenleyebilirsiniz..

2. DOMImplementation arayüzü

DOMImplementation olabilir bir arayüz yepyeni belgeler oluştur ikisini de kullanarak createDocument () (XML için) veya createHTMLDocument () yöntem-neye ihtiyacınız varsa. Arayüze, document.implementation nesne.

createHTMLDocument () yöntem isteğe bağlı bir parametre alır hangisi yeni belgenin başlığı.

Yapabilirsin yeni oluşturulan bir belgeye HTML ekle genellikle yaptığınız gibi: gibi yöntemleri kullanarak ) (Ekleme, AppendChild (), ve DOM ile ilgili diğer JavaScript yöntemleri.

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

Yukarıdaki kodda, yeni HTML dokümanı oluşturuldu kullanmak createHTMLDocument () yöntemi DOMImplementation arayüz ve Selam Dünya! dize gövde elemanına eklendi.

Ardından, yeni oluşturulan belgenin oluşturulduğunda nasıl göründüğünü görmek için, iframe'in belge öğesini değiştirdim (iframeDoc.documentElement) yeni belgenin belge elemanı ile (doc.documentElement) kullanmak replaceChild () yöntem. Bu şekilde görmek mümkün Selam Dünya! sicim oluşturduğumuz ve iframe'e eklediğimiz belgeden.

3. DOMParser API

Adından da anlaşılacağı gibi, DOMParser API HTML / XML dizelerini DOM belgelerine ayrıştırır.

Yeni bir DOMParser nesne örneği yapıcısı kullanılarak oluşturulabilir, DOMParser (). Örnek, adı verilen bir yöntemi tutar. parseFromString () o iki argüman aldıktan sonra ayrıştırma yapar: ayrıştırılacak dize ve oluşturulacak belgenin belge türü.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('Selam Dünya! ', "text / html"); doc.body.append ('fazladan metin'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Yukarıdaki kodda, yeni DOMParser örnek bir HTML dizesini DOM belgesine ayrıştırır kullanmak parseFromString () yöntem.

Ardından, önceki kod pasajında ​​olduğu gibi, yeni oluşturulan belgenin belge öğesi iframe'in belge elemanını değiştirir. Sonuç olarak, oluşturduğumuz belgedeki HTML kodu iframe'de görünür hale gelir.