Analisis prinsip: Langkah 1: Gunakan DOM untuk membuat tag <script> atau <link>, dan lampirkan atribut ke dalamnya, seperti type. Langkah 2: Gunakan metode appendChild untuk mengikat tag ke tag lain, biasanya ke <head> .Aplikasi
:
1. Meningkatkan penggunaan kembali kode dan mengurangi jumlah kode;
2. Menambahkan pengontrol javascript dan sesi dapat mengubah gaya halaman secara dinamis;
3. Karena halaman memuat file secara berurutan dari atas ke bawah, dan memuatnya secara bersamaan, Bian menjelaskan, sehingga Anda dapat menambahkan pengontrol javascript untuk mengontrol urutan pemuatan file halaman, seperti memuat file layout css terlebih dahulu, kemudian menampilkan file kecantikan css dengan gambar, lalu memuat file palsu yang besar, atau memuat sesuai dengan kepentingannya isi.
Tip membaca: Pemula yang tidak pandai menulis elektronik dapat membaca bahasa Mandarin secara langsung, lalu menyalin kodenya dan mencobanya.
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 elemenke
lokasi yang diinginkan dalam pohon dokumen. Kedengarannya jauh lebih mewah daripada yang sebenarnya.
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.
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.
Berikut kutipannya:
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 berkas jika masih baru:
Berikut ini adalah kutipan kutipan:
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
sini
saya hanya mendeteksi secara kasar untuk melihat apakah file yang akan ditambahkan sudah ada dalam daftar nama file yang ditambahkan yang disimpan dalam variabel filesadded sebelum memutuskan apakah akan melanjutkan atau tidak
Anda benar-benar menghapus atau mengganti file .js atau .css yang ditambahkan. Mari kita lihat bagaimana hal itu dilakukan selanjutnya.