Tiga Cara Membuat Dokumen HTML di Fly

Membuat dokumen HTML dengan cepat, dengan atau tanpa JavaScript, kadang-kadang diperlukan. Sama ada matlamatnya adalah untuk memaparkan halaman pengakuan atau iframe yang mengandungi halaman keseluruhan, jika dokumen itu cukup mudah ia dapat dengan mudah disusun dan disampaikan dengan sama ada URL data atau JavaScript.

Tetapi, bagaimana anda melakukannya? Saya pasti anda sudah tahu bagaimana menambah HTML pada dokumen menggunakan JavaScript, tetapi kepada buat dokumen HTML keseluruhan? Anda mungkin berminat dengan beberapa kaedah yang saya akan dipaparkan di bawah, yang mana pertama tidak memerlukan JavaScript!

Saya akan menunjukkan semua dokumen yang baru dibuat dalam iframes supaya anda dapat melihatnya. Walau bagaimanapun, anda boleh menggunakan dokumen yang anda lihat patut. Contohnya, mereka boleh disimpan ke pangkalan data atau dihantar melalui perkhidmatan web untuk diberikan di tempat lain.

1. URL data

URL data menyediakan anda dengan kaedah yang mudah dan berkesan untuk menyampaikan dokumen pada halaman web. Sekiranya anda tidak biasa dengannya, baca artikel sebelumnya tentang cara mereka bekerja.

Pada dasarnya, URL data mulakan dengan data: Skim URL. Ia diikuti oleh kandungan untuk disampaikan, sebelum ini anda boleh menyebut pilihan jenis media dan juga pengekodan kandungan.

Anda mungkin telah melihat imej yang dilayan dengan cara ini, di mana base64 aksara diberikan sebagai kandungan URL data, mengikut jenis media.

Kod di atas memaparkan imej PNG lelaki itu dengan emoji komputer riba-anda boleh menyemaknya di pelayar anda.

Sama seperti cara ini dilakukan, URL data juga boleh menyampaikan dokumen HTML:

Iframe membuat dokumen HTML yang telah ditambah menggunakan URL data yang mengandungi teks / html jenis media & diikuti dengan kod HTML.

Anda boleh mengedit demo Codepen di bawah dengan menambahkan HTML tambahan kepadanya jika anda ingin melihat bagaimana teknik berfungsi.

2. antara muka DOMImplementasi

Pelaksanaan DOMI adalah antara muka yang boleh membuat dokumen baru menggunakan sama ada createDocument () (untuk XML) atau buat HTMLDocument () kaedah mana-mana yang anda perlukan. Antara muka yang diakses menggunakan document.implementation objek.

The buat HTMLDocument () kaedah mengambil satu parameter pilihan yang mana satu tajuk dokumen baru.

Awak boleh tambahkan HTML ke dokumen yang baru dibuat dengan cara yang sama seperti biasanya: dengan menggunakan kaedah seperti tambah (), appendChild (), dan kaedah JavaScript yang berkaitan dengan 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);  

Dalam kod di atas, a dokumen HTML baru dicipta menggunakan buat HTMLDocument () kaedah Pelaksanaan DOMI antara muka dan Hai dunia! rentetan adalah ditambah kepada elemen badannya.

Kemudian, untuk melihat bagaimana dokumen yang baru diwujudkan apabila ia diberikan, saya menggantikan elemen dokumen iframe (iframeDoc.documentElement) dengan elemen dokumen dokumen baru (doc.documentElement) menggunakan menggantikanChild () kaedah. Dengan cara ini, anda akan dapat melihat Hai dunia! tali dari dokumen yang kami buat dan ditambah kepada iframe.

3. API DOMParser

Seperti yang namanya namanya, DOMParser API parses rentetan HTML / XML ke dalam dokumen DOM.

Baru DOMParser contoh objek boleh dibuat menggunakan pembinanya, DOMParser (). Contohnya memegang kaedah yang dipanggil parseFromString () itu melakukan parsing selepas mengambil dua hujah: rentetan yang hendak dihuraikan dan jenis dokumen yang hendak dibuat.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ('Hai dunia! ', "teks / html"); doc.body.append ('teks tambahan'); var iframeDoc = document.querySelector ('iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

Dalam kod di atas, yang baru DOMParser contohnya memaparkan rentetan HTML ke dokumen DOM menggunakan parseFromString () kaedah.

Kemudian, dengan cara yang sama seperti pada coretan kod sebelumnya, elemen dokumen dokumen yang baru dibuat menggantikan elemen dokumen iframe. Akibatnya, kod HTML dalam dokumen yang kami buat dapat dilihat dalam iframe.