Memuat file CSS dan JS eksternal secara dinamis menggunakan DOM untuk membuat tag <script> atau <link> dan melampirkan atribut ke dalamnya, seperti tipe, dll. Kemudian gunakan metode appendChild untuk mengikat tag ke tag lain, biasanya ke <head>.
aplikasi:
1. Meningkatkan penggunaan kembali kode dan mengurangi jumlah kode;
2. Tambahkan pengontrol dan sesi javascript untuk mengubah gaya halaman secara dinamis;
3. Karena halaman memuat file secara berurutan dari atas ke bawah dan menjelaskannya saat memuat, Anda dapat menambahkan pengontrol JavaScript untuk mengontrol urutan pemuatan file halaman. Misalnya, memuat file tata letak CSS terlebih dahulu, lalu menampilkan file kecantikan CSS dengan gambar. Kemudian muat file palsu yang besar, atau muat sesuai dengan pentingnya konten.
Singkatnya, untuk memuat file .js atau .css secara dinamis, ini berarti menggunakan metode DOM untuk terlebih dahulu membuat elemen "skrip" atau "LINK" baru yang megah, menetapkan atribut yang sesuai, dan terakhir, menggunakan elemen.appendChild() untuk menambahkan elemen ke lokasi yang diinginkan dalam pohon dokumen. Kedengarannya jauh lebih mewah daripada yang sebenarnya.
Tugas selanjutnya adalah mengikat tag <head>. Satu masalah ketika mengikat adalah bahwa file yang sama mungkin terikat dua kali. Tidak akan ada pengecualian jika browser terikat dua kali, namun efisiensinya akan rendah. Untuk menghindari situasi ini, kita dapat menambahkan variabel array global baru dan menyimpan nama file yang terikat di dalamnya Sebelum setiap pengikatan, periksa apakah sudah ada tidak ada, ikatlah.
| dokumen.getElementsByTagName("head")[0].appendChild(fileref) |
Dengan merujuk elemen HEAD halaman terlebih dahulu dan kemudian memanggil appendChild(), ini berarti elemen yang baru dibuat ditambahkan ke akhir tag HEAD. Selain itu, Anda harus menyadari bahwa tidak ada elemen yang dirugikan dalam penambahan tag HEAD elemen baru- artinya, jika Anda memanggil loadjscssfile("myscript.js", "js") dua kali, Anda sekarang akan mendapatkan dua elemen "skrip" baru yang keduanya menunjuk ke file Javascript yang sama. Ini hanya bermasalah dari sebuah sudut pandang efisiensi, karena Anda akan menambahkan elemen berlebihan ke halaman dan menggunakan memori browser yang tidak perlu dalam prosesnya. Cara sederhana untuk mencegah file yang sama ditambahkan lebih dari sekali adalah dengan melacak file yang ditambahkan oleh loadjscssfile(), dan hanya memuat file jika masih baru:
| var filesadded="" //Simpan variabel array yang memiliki nama file terikat fungsi checkloadjscssfile(nama file, tipe file){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf menentukan apakah ada item dalam array loadjscssfile(nama file, tipe file) filesadded+="["+filename+"]" //Tambahkan nama file ke filesadded } kalau tidak alert("file sudah ditambahkan!")//Prompt jika sudah ada } checkloadjscssfile("myscript.js", "js") //sukses checkloadjscssfile("myscript.js", "js") //file berlebihan, jadi file tidak ditambahkan |
fungsi loadjscssfile(nama file, tipe file){ if (filetype=="js"){ //Tentukan jenis file var fileref=document.createElement('script')//Buat tag fileref.setAttribute("type","text/javascript")//Tentukan nilai tipe atribut sebagai teks/javascript fileref.setAttribute("src", nama file)//Alamat file } else if (filetype=="css"){ //Tentukan jenis file var fileref=document.createElement("tautan") fileref.setAttribute("rel", "lembar gaya") fileref.setAttribute("ketik", "teks/css") fileref.setAttribute("href", nama file) } jika (typeof fileref!="tidak terdefinisi") dokumen.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //Browser memuat file secara dinamis saat halaman dibuka. loadjscssfile("javascript.php", "js") // Browser secara dinamis memuat "javascript.php" saat halaman dibuka. loadjscssfile("mystyle.css", "css") //Browser memuat file .css secara dinamis saat halaman dibuka. |