Ringkasan kaedah untuk memuatkan kemahiran js_javascript secara dinamik

Contoh dalam artikel ini meringkaskan kaedah memuatkan js secara dinamik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kaedah 1: Dokumen langsung.tulis (tak segerak)

Salin kod Kodnya adalah seperti berikut: Document.write(" "); Memandangkan kaedah ini memuatkan tak segerak, document.write akan menulis semula antara muka, yang jelas tidak praktikal Kaedah 2: Tukar secara dinamik atribut src skrip sedia ada (tak segerak)

Salin kod Kod adalah seperti berikut: &lt ;/skrip&gt ; xx.src="test.js"

Kaedah ini tidak akan mengubah elemen antara muka atau menulis semula elemen antara muka, tetapi ia juga akan dimuatkan secara tak segerak Kaedah 3: Buat elemen skrip secara dinamik (tak segerak)

Salin kod Kod adalah seperti berikut: var body= document.getElementsByTagName('BODY').[0]; var script= document.createElement("skrip"); Script.type = "text/javascript"; Script.src="xx.js"; body.appendChild( oScript);

Kelebihan kaedah ini berbanding kaedah kedua ialah tidak perlu menulis teg skrip dalam antara muka pada permulaannya Kaedah 4: pemuatan XMLHttpRequest/ActiveXObject (tak segerak)

Salin kod

Kod adalah seperti berikut:

/** * Muatkan skrip js secara tidak segerak * @param id Id teg yang perlu ditetapkan * @param url Laluan relatif atau laluan mutlak fail js */ loadJs:function(id,url){ var xmlHttp = null; if(window.ActiveXObject){//IE cuba { //Boleh digunakan dalam IE6 dan versi yang lebih baru xmlHttp = ActiveXObject baharu("Msxml2.XMLHTTP"); } tangkap (e) { //IE5.5 dan versi yang lebih baru boleh digunakan xmlHttp = ActiveXObject baharu("Microsoft.XMLHTTP"); } }else if(window.XMLHttpRequest){ //Firefox, Opera 8.0, Safari, Chrome xmlHttp = XMLHttpRequest(); } //Gunakan pemuatan segerak xmlHttp.open("GET",url,false); //Hantar permintaan segerak, //Jika penyemak imbas ialah Chrome atau Opera, ia mesti dikeluarkan sebelum ia boleh dijalankan, jika tidak, ralat akan dilaporkan xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ //4 bermakna data telah dihantar if(xmlHttp.readyState == 4){ //0 ialah akses tempatan, 200 hingga 300 mewakili capaian yang berjaya kepada pelayan, //304 bermaksud cache sedang diakses tanpa pengubahsuaian If((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "skrip" ); myScript.language = "javascript"; myScript.type = "text/javascript"; myScript.id = id; cuba{ //IE8 dan ke bawah tidak menyokong kaedah ini dan perlu ditetapkan melalui atribut teks myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }tangkap (cth){ myScript.text = xmlHttp.responseText; } myBody.appendChild(myScript); } } //Gunakan pemuatan tak segerak xmlHttp.open("GET",url,true); xmlHttp.send(null); }

Menetapkannya kepada palsu dalam keadaan terbuka bermakna pemuatan segerak tidak memerlukan penetapan acara onreadystatechange

Keempat-empat kaedah ini semuanya dilaksanakan secara tidak segerak, iaitu, semasa memuatkan skrip ini, skrip pada halaman utama terus berjalan.

Kaedah 5: XMLHttpRequest/ActiveXObject memuatkan (penyegerakan)

Salin kod

Kod adalah seperti berikut: /** * 同步加载js脚本 * @param id 需要设置的 标签的id * @param url js文件的相对路径或绝对路径 * @return {Boolean} 返回是否加载成功，true代表成功，false代表失败 */ loadJs:function(id,url){ var xmlHttp = null; if(window.ActiveXObject){//IE try { //IE6以及以后版本中可以使用 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { //IE5.5以及以后版本可以使用 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } }else if(window.XMLHttpRequest){ //Firefox，Opera 8.0 ，Safari，Chrome xmlHttp = new XMLHttpRequest(); } //采用同步加载 xmlHttp.open("GET",url,false); //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错 xmlHttp.send(null); //4代表数据发送完毕 if( xmlHttp.readyState == 4 ){ //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存 if((xmlHttp.status >= 200 && xmlHttp.status var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "script" ); myScript.language = "javascript"; myScript.type = "text/javascript"; myScript.id = id; try{ //IE8以及以下不支持这种方式，需要通过text属性来设置 myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }catch (ex){ myScript.text = xmlHttp.responseText; } myBody.appendChild(myScript); return true; }else{ return false; } }else{ return false; } } 希望本文所述对大家的javascript程序设计有所帮助。