Artikel ini terutama memperkenalkan dua metode untuk memuat file JavaScript secara dinamis. Teman yang tertarik dapat merujuknya.
Yang pertama adalah menggunakan metode AJAX untuk memuat kode file skrip dari latar belakang ke latar depan, dan kemudian mengimplementasikan kode untuk konten yang dimuat melalui eval (). Tipe kedua adalah membuat tag skrip, mengkonfigurasi atribut SRC -nya, dan memuat JS dengan memasukkan tag skrip ke kepala halaman, yang setara dengan menulis <skrip src = "..."> </script> di kepala, tetapi tag skrip ini dibuat menggunakan JS SRC.
Misalnya, jika kita ingin memuat callbakc.js secara dinamis, kita memerlukan tag skrip:
Kode ini adalah sebagai berikut: Salin kode sebagai berikut: <type skrip = "Text/JavaScript" src = "call.js"> </cript>
Kode berikut adalah cara membuat tag ini melalui JS (dan menambahkannya ke kepala):
Kodenya adalah sebagai berikut:
var head = document.geteLementsbyTagname ('head') [0]; var skrip = document.createElement ('Script'); script.type = 'Text/JavaScript'; script.src = 'call.js'; head.AppendChild (skrip);Ketika call.js dimuat, kita perlu memanggil metode di dalamnya. Namun, setelah header.AppendChild (skrip) kami tidak dapat segera menelepon JS. Karena browser memuat JS ini secara tidak sinkron, kami tidak tahu kapan itu akan dimuat. Namun, kita dapat menilai apakah helper.js memuat melalui mendengarkan peristiwa. (Misalkan ada metode panggilan balik di call.js) Kode ini adalah sebagai berikut:
var head = document.geteLementsbyTagname ('head') [0]; var skrip = document.createElement ('Script'); script.type = 'Text/JavaScript'; Script.onReadyStateChange = function () {if (this.readystate == 'complete') callback (); } script.onload = function () {callback (); } script.src = 'helper.js'; head.AppendChild (skrip);Saya mengatur 2 fungsi mendengarkan acara karena OnReadyStateChange digunakan di IE, sementara Onload didukung oleh Gecko, Browser Webkit dan Operator. Faktanya, ini. Secara teoritis, perubahan negara adalah sebagai berikut:
1. Tidak diinisialisasi
2.Loading
3.Loaded
4. Intiaktif
5.clete
Tetapi beberapa negara bagian akan dilewati. Menurut pengalaman di IE7, Anda hanya bisa mendapatkan yang dimuat dan diselesaikan, dan keduanya tidak dapat muncul. Alasannya mungkin Anda menentukan apakah membaca dari cache mempengaruhi perubahan di negara bagian, atau alasan lain. Yang terbaik adalah mengubah kondisi penilaian menjadi ini. this.readystate == 'Lengkapi'
Mengacu pada implementasi jQuery, kami akhirnya menerapkannya sebagai berikut: Kode ini sebagai berikut:
var head = document.geteLementsbyTagname ('head') [0]; var skrip = document.createElement ('Script'); script.type = 'Text/JavaScript'; script.onload = script.onreadystatechange = function () {if (! this.readystate || this.readystate === "dimuat" || this.readystate === "complete") {help (); // Tangani bocor memori di IE Script.onload = Script.onReadyStateChange = null; }}; script.src = 'helper.js'; head.AppendChild (skrip);Ada situasi sederhana lain yang dapat Anda tulis panggilan untuk membantu () di akhir helper.js, sehingga Anda dapat memastikan bahwa bantuan () dapat secara otomatis dipanggil setelah helper.js dimuat. Tentu saja, pada akhirnya, ini tidak cocok untuk aplikasi Anda.
Juga mencatat:
1. Karena Tag Script SRC dapat mengakses sumber daya di seluruh domain, metode ini dapat mensimulasikan AJAX dan menyelesaikan masalah akses domain silang Ajax.
2. Jika kode HTML dikembalikan dengan AJAX berisi skrip, memasukkan skrip di HTML langsung ke DOM dengan bagian dalam HTML tidak dapat membuat skrip dalam HTML berfungsi. Saya melihat kasar pada kode asli jQuery (). Html (html). JQuery juga pertama -tama mem -parsing parameter yang dilewati, melucuti kode skrip di dalamnya, dan membuat tag skrip secara dinamis. Metode HTML yang digunakan oleh jQuery ditambahkan ke dom html jika berisi skrip, dapat dieksekusi. menyukai:
Salinan kode adalah sebagai berikut: jQuery ("#konten"). Html ("<script> alert ('aa'); <// script>");
Di atas adalah metode memuat file JavaScript secara dinamis. Saya berharap ini akan membantu untuk pembelajaran semua orang.