Résumé des méthodes de chargement dynamique des compétences js_javascript

Les exemples de cet article résument les méthodes de chargement dynamique de js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Méthode 1 : Direct document.write (asynchrone)

Copier le code Le code est le suivant :

");

Comme cette méthode est un chargement asynchrone, document.write va réécrire l'interface, ce qui n'est évidemment pas pratique

Méthode 2 : Modifier dynamiquement l'attribut src d'un script existant (asynchrone)

Copier le code Le code est le suivant :

Cette méthode ne modifiera pas les éléments de l'interface ni ne réécrira les éléments de l'interface, mais elle sera également chargée de manière asynchrone Méthode 3 : Créer dynamiquement des éléments de script (asynchrone)

Copier le code Le code est le suivant :<script></div> var body= document.getElementsByTagName('BODY').[0]; var script= document.createElement("script"); <div class="codebody" id="code52191"> Script.type = "texte/javascript"; <br> Script.src="xx.js"; <br> body.appendChild(oScript); <br> </script>


L'avantage de cette méthode par rapport à la deuxième méthode est qu'il n'est pas nécessaire d'écrire une balise de script dans l'interface au début. L'inconvénient est le chargement asynchrone

. Méthode 4 : chargement XMLHttpRequest/ActiveXObject (asynchrone)

Copier le code Le code est le suivant :

/**
* Charger le script js de manière asynchrone
* @param id L'identifiant de la balise <script> qui doit être définie <br> * @param url Chemin relatif ou chemin absolu du fichier js <br>*/ <br> loadJs:fonction(id,url){ <br>                              <br> var xmlHttp = nul; <br> if(window.ActiveXObject){//IE <br> essayez { <br> //Peut être utilisé dans IE6 et versions ultérieures <br> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } attraper(e) { <br> //IE5.5 et les versions ultérieures peuvent être utilisées <br> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); <br> } <br> }else if(window.XMLHttpRequest){ <br> //Firefox, Opera 8.0, Safari, Chrome <br> xmlHttp = new XMLHttpRequest(); <br> } <br> //Adopter le chargement synchrone <br> xmlHttp.open("GET",url,false); //Envoyer une requête synchrone, <br> //Si le navigateur est Chrome ou Opera, il doit être publié avant de pouvoir s'exécuter, sinon une erreur sera signalée <br> xmlHttp.send(null); <br> xmlHttp.onreadystatechange = function(){ <br> //4 signifie que les données ont été envoyées <br> if(xmlHttp.readyState == 4){ <br> //0 est la zone locale à laquelle vous accédez, 200 à 300 représente un accès réussi au serveur, <br> //304 signifie que le cache est accessible sans modification <br> Si((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br> var monBody = document.getElementsByTagName("BODY")[0]; var monScript = document.createElement( "script" ); <br> monScript.langue = "javascript"; <br> monScript.type = "text/javascript"; <br> monScript.id = id; <br> essayez{ <br> //IE8 et versions antérieures ne prennent pas en charge cette méthode et doivent être définis via l'attribut text <br> monScript.appendChild(document.createTextNode(xmlHttp.responseText)); }attraper (ex){ <br> monScript.text = xmlHttp.responseText; <br> }  <br> monBody.appendChild(monScript); <br> }  <br> } <br> } <br> //Utiliser le chargement asynchrone <br> xmlHttp.open("GET",url,true); <br> xmlHttp.send(null); <br> ><br><br> <br>Le définir sur false en open signifie un chargement synchrone ne nécessite pas de définir l'événement onreadystatechange<br> </div>Ces quatre méthodes sont toutes exécutées de manière asynchrone, c'est-à-dire que pendant le chargement de ces scripts, les scripts de la page principale continuent de s'exécuter. <p>Méthode 5 : Chargement XMLHttpRequest/ActiveXObject (synchronisation)</p> <p></p> <p><br>Copier le code</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="73149" class="copybut" id="copybut73149" onclick="doCopy('code73149')"> Le code est le suivant :<u><div class="codebody" id="code73149">/**<br> * 同步載入js腳本 <br> * @param id   需要設定的<script>標籤的id <br /> * @param url   js檔案的相對路徑或絕對路徑 <br /> * @return {Boolean}   回傳是否載入成功，true代表成功，false代表失敗 <br />*/  <br /> loadJs:function(id,url){  <br />     <br />   var  xmlHttp = null;  <br />   if(window.ActiveXObject){//IE  <br />       try {  <br />    //IE6以及以後版本可以使用  <br />    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  <br />       } catch (e) {  <br />    //IE5.5及以後版本可以使用  <br />    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  <br />       }  <br />   }else if(window.XMLHttpRequest){  <br />       //Firefox，Opera 8.0 ，Safari，Chrome  <br />       xmlHttp = new XMLHttpRequest();  <br />   }  <br />   //採用同步載入  <br />   xmlHttp.open("GET",url,false);  <br />   //傳送同步請求，如果瀏覽器為Chrome或Opera，必須發佈後才能運行，不然會報錯  <br />   xmlHttp.send(null);  <br />   //4代表資料傳送完畢  <br />   if( xmlHttp.readyState == 4 ){  <br />       //0為存取的本地，200到300代表存取伺服器成功，304代表沒做修改存取的是快取  <br />       if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){  <br />    var myBody = document.getElementsByTagName("BODY")[0];  <br />    var myScript = document.createElement( "script" );  <br />    myScript.language = "javascript";  <br />    myScript.type = "text/javascript";  <br />    myScript.id = id;  <br />    try{  <br />        //IE8以及以下不支援此方式，需要透過text屬性來設定  <br />        myScript.appendChild(document.createTextNode(xmlHttp.responseText));  <br />    }catch (ex){  <br />        myScript.text = xmlHttp.responseText;  <br />    }  <br />    myBody.appendChild(myScript);  <br />    return true;  <br />       }else{  <br />    return false;  <br />       }  <br />   }else{  <br />       return false;  <br />   }  <br /> }</script>

希望本文所述對大家的javascript程式設計有所幫助。