मक्खी पर HTML दस्तावेज़ बनाने के तीन तरीके

मक्खी पर HTML दस्तावेज़ बनाना, जावास्क्रिप्ट के साथ या उसके बिना, कभी-कभी आवश्यक होता है। चाहे लक्ष्य किसी पावती पृष्ठ को प्रदर्शित करना हो या एक पूरे पृष्ठ वाले एक iframe, यदि दस्तावेज़ सरल है तो यह आसानी से हो सकता है एक साथ रखा और डेटा URL या जावास्क्रिप्ट के साथ सेवा की.

लेकिन, आप इसके बारे में कैसे जाते हैं? मुझे यकीन है कि आप पहले से ही जानते हैं कि जावास्क्रिप्ट का उपयोग करके दस्तावेज़ में HTML कैसे जोड़ा जा सकता है, लेकिन एक संपूर्ण HTML दस्तावेज़ बनाएँ? आपको उन कुछ तरीकों में दिलचस्पी हो सकती है, जिन्हें मैं नीचे दिखा रहा हूँ, जिनमें से पहले को जावास्क्रिप्ट की भी आवश्यकता नहीं है!

मैं सभी नए बनाए गए दस्तावेज़ दिखाऊंगा iframes में ताकि आप उन्हें प्रस्तुत देख सकें। हालाँकि, आप उन दस्तावेज़ों का उपयोग कर सकते हैं जो आपको फिट दिखाई देते हैं। उदाहरण के लिए, वे हो सकते हैं डेटाबेस में सहेजा गया या वेब सेवाओं में भेजा गया कहीं और गाया जाना.

1. डेटा URL

डेटा URL आपको एक सरल और प्रभावी तरीका प्रदान करता है एक वेब पेज पर दस्तावेजों की सेवा. यदि आप इससे परिचित नहीं हैं तो हमारे पिछले लेख को पढ़ें कि वे कैसे काम करते हैं.

मूल रूप से, डेटा URL के साथ शुरू करो डेटा: URL योजना. इसके बाद है परोसी जाने वाली सामग्री, जिसके पहले आप वैकल्पिक रूप से उल्लेख कर सकते हैं मीडिया का स्वरूप और यह सामग्री की एन्कोडिंग.

आपने देखा होगा कि छवियाँ इस तरह से परोसी जाती हैं, जहाँ आधार ६४ वर्ण मीडिया प्रकार के बाद, डेटा URL की सामग्री के रूप में दिया जाता है.

उपरोक्त कोड लैपटॉप इमोजी वाले आदमी की PNG छवि प्रदर्शित करता है-आप इसे अपने ब्राउज़र में देख सकते हैं.

यह कैसे किया जाता है के समान, डेटा URL HTML दस्तावेज़ों की सेवा भी कर सकते हैं:

आइफ्रेम HTML दस्तावेज़ रेंडर करता है डेटा URL का उपयोग करके जोड़ा गया था पाठ / html मीडिया कोड और HTML कोड के बाद.

यदि आप यह देखना चाहते हैं कि तकनीक कैसे काम करती है, तो आप इसमें अतिरिक्त HTML जोड़कर नीचे दिए गए कोडपेन डेमो को संपादित कर सकते हैं.

2. DOMImplementation इंटरफ़ेस

DOMImplementation एक इंटरफ़ेस है जो कर सकता है बिलकुल नए दस्तावेज़ बनाएँ या तो इसका उपयोग कर createDocument () (XML के लिए) या createHTMLDocument () विधि-जो भी आपको चाहिए। इंटरफ़ेस का उपयोग कर पहुँचा है document.implementation वस्तु.

createHTMLDocument () तरीका एक वैकल्पिक पैरामीटर लेता है कौन सा नए दस्तावेज़ का शीर्षक.

आप ऐसा कर सकते हैं एक नए बनाए गए दस्तावेज़ में HTML जोड़ें उसी तरह जो आप आमतौर पर करते हैं: जैसे कि तरीकों का उपयोग करके संलग्न (), अपेंड चाइल्ड(), और अन्य डोम से संबंधित जावास्क्रिप्ट तरीके.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('हैलो वर्ल्ड!'); var iframeDoc = document.querySelector ('iframe')। contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

उपरोक्त कोड में, ए नया HTML डॉक्यूमेंट बनाया गया है का उपयोग करते हुए createHTMLDocument () की विधि DOMImplementation इंटरफ़ेस और नमस्ते दुनिया! स्ट्रिंग है इसके शरीर तत्व में जोड़ा गया.

फिर, यह देखने के लिए कि नव निर्मित दस्तावेज़ कैसा दिखता है, जब उसका प्रतिपादन किया जाता है, तो मैंने iframe का दस्तावेज़ तत्व बदल दिया (iframeDoc.documentElement) नए दस्तावेज़ के दस्तावेज़ तत्व के साथ (doc.documentElement) का उपयोग करते हुए replaceChild () तरीका। इस तरह, आप करेंगे देखने में सक्षम हो नमस्ते दुनिया! तार दस्तावेज़ से हमने बनाया और iframe में जोड़ा.

3. DOMParser API

जैसा कि इसके नाम से पता चलता है, द DOMParser एपीआई DOM दस्तावेजों में HTML / XML स्ट्रिंग्स को पार्स करता है.

एक नया DOMParser वस्तु उदाहरण इसके निर्माता का उपयोग करके बनाया जा सकता है, DOMParser (). उदाहरण एक विधि कहलाता है parseFromString () उस दो तर्क लेने के बाद पार्सिंग करता है: स्ट्रिंग को पार्स किया जाना है और दस्तावेज़ का दस्तावेज़ प्रकार बनाया जाना है.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('नमस्ते दुनिया! ', "पाठ / html"); doc.body.append ('अतिरिक्त पाठ'); var iframeDoc = document.querySelector ('iframe')। contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

उपरोक्त कोड में, एक नया DOMParser उदाहरण एक डोम दस्तावेज़ में एक HTML स्ट्रिंग पार्स करता है का उपयोग करते हुए parseFromString () तरीका.

फिर, उसी तरह जैसे पिछले कोड स्निपेट में, नए बनाए गए दस्तावेज़ के दस्तावेज़ तत्व iframe के दस्तावेज़ तत्व को प्रतिस्थापित करता है. परिणामस्वरूप, हमारे द्वारा बनाए गए दस्तावेज़ में HTML कोड iframe में दिखाई देता है.