Dapatkah saya memasukkan html ke dalam javascript?

Elemen "tautan" adalah berkah. Hal ini memungkinkan penyematan stylesheet dan JavaScript yang diperlukan dalam banyak dokumen dengan mudah. Itu tidak memungkinkan penyematan file HTML. Untuk mencapai itu kami terbatas pada elemen „iframes“ atau metode JavaScript „XMLHttpRequest()“. Berkat Impor HTML5 yang baru, kami sekarang dapat menggunakan elemen „“ untuk memuat satu file HTML ke file lainnya

Pro-Tip

Daftar akun Jotform gratis untuk membuat formulir online canggih dalam hitungan menit — tanpa perlu coding

Markup Sederhana di Header

Embedding an HTML file is simple. All we need to do is use the common „“ element. Then we add the value „import“ to the „rel“ attribute. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts.

<link href="extern.html" rel="import" />

Jika file yang akan diimpor mengandung elemen „gaya“ atau „skrip“ lebih lanjut, ini juga akan diimpor. Tidak masalah apakah elemen-elemen ini ditandai di bagian kepala atau badan dokumen. Satu kasus penggunaan untuk Impor HTML5 bisa jadi, untuk mengumpulkan semua stylesheet dan skrip yang diperlukan dalam proyek tertentu dan menambahkan ke satu file HTML tunggal, yang kemudian diimpor ke semua file proyek lainnya. Ini sangat menyederhanakan pemeliharaan proyek yang lebih besar

Sementara dokumen yang diimpor berisi stylesheet, ini akan langsung diterapkan. Lembar gaya yang ditentukan sebelumnya dari dokumen induk akan ditimpa. Untuk memastikan hal ini tidak terjadi, jaga posisi tautan impor di dokumen induk. Hal yang sama berlaku untuk JavaScripts. Bahkan elemen referensi eksternal dari dokumen yang diimpor akan dimuat ke dalam dokumen induk

Mengakses Konten File Impor

Konten lain dari dokumen yang diimpor akan dimuat, tetapi tidak ditampilkan. Semua teks, gambar, dan media lain tidak akan terlihat karena bukan bagian dari pohon DOM dokumen induk. Anda masih dapat mengaksesnya melalui JavaScript

var extern = document.getElementsByTagName("link")[0].import;

Contoh kami mengasumsikan bahwa elemen "tautan" pertama memuat file HTML. Menggunakan properti JavaScript „import“, kami menulis struktur pohon lengkap dari file yang diimpor ke variabel. Dari sana kami dapat mengakses masing-masing node melalui JavaScript

var absatz = extern.getElementsByTagName("p")[0];

Dari sini kita dapat mengakses dan membaca semua node menggunakan metode JavaScript umum seperti „getElementsByTagName()“. Sekarang kita dapat menambahkannya dengan mudah ke pohon DOM dari dokumen induk. Dalam pendekatan yang lebih radikal, kita juga bisa mengganti elemen „body“ sepenuhnya dengan konten file yang diimpor

window.addEventListener("load", function() {
  document.getElementsByTagName("html")[0].replaceChild(extern.getElementsByTagName("body")[0], document.getElementsByTagName("body")[0]);
}, false);

Contoh kami mengganti konten elemen „body“ menggunakan „replaceChild()“. Untuk memastikan penggantian tidak dimulai sebelum semua elemen dimuat, fungsi terikat ke event listener yang ditambahkan melalui „addEventListener()“

Dukungan Peramban

Pada saat penulisan ini, hanya Chrome yang mendukung Impor HTML5. Anda juga harus mengaktifkan fungsionalitas secara manual. Panggil „chrome. //flags“ dari bilah alamat, yang memberi Anda akses ke fitur eksperimental. Cari „Aktifkan Impor HTML“ dan – yah – aktifkan. Setelah awal yang baru, Impor HTML5 Chrome Anda akan tersedia

Gunakan fungsi berikut untuk memeriksa apakah browser tertentu mendukung Impor HTML5

if ("import" in document.createElement("link")) {
  // HTML5 Imports are supported.
}

Browser lama dapat menggunakan polyfill, yang mengemulasi Impor HTML5 di browser yang tidak didukung. Dengan begitu tidak perlu pergi tanpa Impor HTML5 dalam proyek web modern

Untuk menyertakan file JavaScript eksternal, kita dapat menggunakan tag skrip dengan atribut src. Anda telah menggunakan atribut src saat menggunakan gambar. Nilai untuk atribut src harus berupa jalur ke file JavaScript Anda

Tag skrip ini harus disertakan di antara tag dalam dokumen HTML Anda

File JavaScript

• Selalu akhiri dengan ekstensi js
• Hanya sertakan JavaScript

Merupakan kebiasaan untuk meletakkan semua file JavaScript di folder bernama js di situs web, seperti itu

Demo Sederhana Menyertakan JavaScript

Berikut adalah demonstrasi yang sangat sederhana tentang cara memasukkan file JavaScript eksternal ke dalam halaman HTML

JavaScript Orang Lain

Untuk kelas ini Anda tidak diharapkan untuk menulis kode JavaScript yang sebenarnya. Beruntung bagi Anda, banyak orang telah menulis banyak JavaScript dan bahkan mengizinkan Anda untuk menggunakannya secara gratis

Kerangka JavaScript

Framework pada dasarnya adalah pustaka kode untuk bahasa tertentu. Umumnya, kerangka mengabstraksi tugas-tugas umum dan membuatnya lebih mudah dan lebih cepat bagi desainer dan pengembang untuk menulis kode khusus mereka. Kerangka tidak benar-benar melakukan apa pun sendiri, mereka hanya menyediakan platform yang lebih mudah bagi orang untuk membangunnya

Kerangka JavaScript Umum

Dari kerangka kerja ini, JQuery saat ini adalah yang paling populer. Itu juga yang paling Anda sukai untuk digunakan sebagai kata buzz

Ukuran File JavaScript

Banyak file JavaScript cenderung agak besar, yang dapat memperlambat waktu muat halaman Anda. Framework populer biasanya menawarkan versi "minified" dari kode mereka. Anda harus selalu menggunakan versi ini di halaman Anda karena akan memiliki ukuran file yang lebih kecil