สามวิธีในการสร้างเอกสาร HTML ได้ทันที

สร้างเอกสาร HTML ได้ทันที, มีหรือไม่มี JavaScript บางครั้งก็จำเป็น ไม่ว่าเป้าหมายจะแสดงหน้าการตอบรับหรือ iframe ที่มีทั้งหน้าถ้าเอกสารนั้นง่ายพอก็สามารถทำได้อย่างง่ายดาย รวบรวมและเสิร์ฟพร้อมกับ URL ข้อมูลหรือ JavaScript.

แต่คุณจะไปเกี่ยวกับมันได้อย่างไร ฉันแน่ใจว่าคุณรู้วิธีเพิ่ม HTML ในเอกสารโดยใช้ JavaScript แล้ว แต่ถึง สร้างเอกสาร HTML ทั้งหมด? คุณอาจสนใจวิธีการบางอย่างที่ฉันจะแสดงด้านล่างวิธีแรกซึ่งไม่จำเป็นต้องใช้ JavaScript!

ฉันจะแสดงเอกสารที่สร้างขึ้นใหม่ทั้งหมด ใน iframes เพื่อให้คุณเห็นการเรนเดอร์ อย่างไรก็ตามคุณสามารถใช้เอกสารได้ตามที่เห็นสมควร ตัวอย่างเช่นพวกเขาสามารถ บันทึกลงในฐานข้อมูลแล้ว หรือ ส่งผ่านบริการเว็บ ที่จะแสดงผลที่อื่น.

1. URL ข้อมูล

URL ข้อมูล ให้วิธีการที่ง่ายและมีประสิทธิภาพแก่คุณ ให้บริการเอกสารบนหน้าเว็บ. หากคุณไม่คุ้นเคยกับมันอ่านบทความก่อนหน้าของเราเกี่ยวกับวิธีการทำงาน.

โดยทั่วไป URL ข้อมูล เริ่มต้นด้วย ข้อมูล: รูปแบบ URL. ตามมาด้วย เนื้อหาที่จะให้บริการ, ก่อนที่คุณจะเลือกที่จะพูดถึง ประเภทสื่อ และ การเข้ารหัสของเนื้อหา.

คุณอาจเคยเห็นภาพเสิร์ฟแบบนี้ที่ไหน base64 ตัวอักษร จะได้รับเป็นเนื้อหาของ URL ข้อมูลตามประเภทสื่อ.

รหัสด้านบนแสดงภาพ PNG ของชายหนุ่มที่มีแล็ปท็อปอิโมจิคุณสามารถตรวจสอบได้ในเบราว์เซอร์ของคุณ.

คล้ายกับวิธีทำสิ่งนี้, URL ข้อมูลยังสามารถให้บริการเอกสาร HTML:

iframe แสดงผลเอกสาร HTML ที่ถูกเพิ่มเข้ามาโดยใช้ URL ข้อมูลที่มี text / html ประเภทสื่อและตามด้วยรหัส HTML.

คุณสามารถแก้ไขตัวอย่าง Codepen ด้านล่างได้โดยเพิ่ม HTML พิเศษลงไปหากคุณต้องการดูวิธีการทำงานของเทคนิค.

2. DOMImplementation อินเตอร์เฟซ

DOMImplementation เป็นอินเตอร์เฟสที่สามารถ สร้างเอกสารใหม่ ใช้อย่างใดอย่างหนึ่ง createDocument () (สำหรับ XML) หรือ createHTMLDocument () วิธีใดก็ตามที่คุณต้องการ มีการเข้าถึงอินเทอร์เฟซโดยใช้ document.implementation วัตถุ.

createHTMLDocument () วิธี รับพารามิเตอร์ทางเลือกหนึ่งพารามิเตอร์ ซึ่งก็คือ หัวเรื่องของเอกสารใหม่.

คุณสามารถ เพิ่ม HTML ให้กับเอกสารที่สร้างขึ้นใหม่ เช่นเดียวกับที่คุณทำโดยใช้วิธีการเช่น ผนวก(), appendChild (), และวิธี JavaScript อื่น ๆ ที่เกี่ยวข้องกับ DOM.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ('Hello World!'); 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 API แยกวิเคราะห์สตริง HTML / XML ลงในเอกสาร DOM.

ใหม่ DOMParser ตัวอย่างวัตถุ สามารถสร้างได้โดยใช้ Constructor, 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 ไปยังเอกสาร DOM ใช้ parseFromString () วิธี.

จากนั้นในทำนองเดียวกับในโค้ดขนาดก่อนหน้าองค์ประกอบของเอกสารของเอกสารที่สร้างขึ้นใหม่ แทนที่องค์ประกอบเอกสารของ iframe. ด้วยเหตุนี้โค้ด HTML ในเอกสารที่เราสร้างจะปรากฏให้เห็นใน iframe.