Réponses clés au chargement dynamique des scripts JS, au point

Utilisez ajax pour développer un site Web. Lorsque vous utilisez ajax, vous devez utiliser beaucoup de code JS, et tout le code n'est pas utilisé sur la première page chargée

Il y a donc beaucoup de dynamique. Le chargement du code JS est plus approprié. Quatre méthodes sont présentées ci-dessous. Dans le développement ajax, la première méthode ne convient pas.

est essentiellement une méthode détaillée La méthode de chargement dynamique. JS est le suivant :
1. Directement document.write

<scrīpt language="javascrīpt"> 
    document.write("<scrīpt src=&#39;test.js&#39;><//scrīpt>"); 
</scrīpt>

2. Changer dynamiquement l'attribut src du script existant

<scrīpt src=&#39;&#39; id="s1"></scrīpt> 
<scrīpt language="javascrīpt"> 
    s1.src="test.js" 
</scrīpt>

3 , créer dynamiquement des éléments de script

<scrīpt> 
    var oHead = document.
getElementsByTagName
(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src="test.js"; 
    oHead.appendChild( oscrīpt); 
</scrīpt>

Ces trois méthodes sont toutes exécutées de manière asynchrone, c'est-à-dire que lors du chargement de ces scripts, les scripts de la page principale continuent de s'exécuter. Si la méthode ci-dessus est utilisée, alors le. suivant Le code n'aura pas l'effet escompté.

Script JS à charger dynamiquement : a.js, voici le contenu du fichier.

var str = "中国"; 
alert( "这是a.js中的变量：" + str );

Code de la page principale :

<scrīpt language="Javascrīpt"> 
function LoadJS( id, fileUrl ) 
{ 
    var scrīptTag = document.getElementById( id ); 
    var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    if ( scrīptTag  ) oHead.removeChild( scrīptTag  ); 
    oscrīpt.id = id; 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src=fileUrl ; 
    oHead.appendChild( oscrīpt); 
} 
LoadJS( "a.js" ); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

Une fois le code ci-dessus exécuté, l'alerte de a.js est exécutée et un message apparaît,

Mais la page principale génère une erreur, non Une boîte de dialogue apparaît. La raison est que « str » n'est pas défini, pourquoi ? Parce que a.js n'est pas complètement chargé avec succès lorsque la page principale récupère

de str. Lorsque vous devez exécuter un script de manière synchrone, vous pouvez utiliser la quatrième méthode ci-dessous.

4. Principe : Utiliser XMLHTTP pour obtenir le contenu du script, puis créer un objet script .
Remarque : a.js doit être enregistré avec l'encodage UTF8 pour éviter les erreurs. Parce que le serveur et XML utilisent le codage UTF8 pour transmettre les données.
Code de la page principale :

<scrīpt language="Javascrīpt"> 
function GetHttpRequest() 
{ 
    if ( window.XMLHttpRequest ) // Gecko 
        
return
 new XMLHttpRequest() ; 
    else if ( window.ActiveX
Object
 ) // IE 
        return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
function AjaxPage(sId, url){ 
    var oXmlHttp = GetHttpRequest() ; 
    oXmlHttp.OnReadyStateChange = function()  
    { 
        if ( oXmlHttp.readyState == 4 ) 
        {
            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 
            {
                
Include
JS( sId, url, oXmlHttp.responseText );
            } 
            else 
            { 
                alert( &#39;XML request error: &#39; + oXmlHttp.statusText + &#39; (&#39; + oXmlHttp.status + &#39;)&#39; ) ; 
            } 
        } 
    } 
    oXmlHttp.open(&#39;GET&#39;, url, true); 
    oXmlHttp.send(null); 
} 
function IncludeJS(sId, fileUrl, source) 
{ 
    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
        var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
        var oscrīpt = document.createElement( "scrīpt" ); 
        oscrīpt.language = "javascrīpt"; 
        oscrīpt.type = "text/javascrīpt"; 
        oscrīpt.id = sId; 
        oscrīpt.defer = true; 
        oscrīpt.text = source; 
        oHead.appendChild( oscrīpt ); 
    } 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

Utilisez ajax pour charger le code JS de manière synchrone. En charger un est bien, mais lorsqu'il y en a deux, trois ou plus, il est plus rapide de charger de manière asynchrone.

J'utilise la troisième méthode. Je nomme chaque JS Lorsqu'un JS est chargé, un indicateur est défini pour indiquer qu'il a été chargé.

//所有的JS文件   
var jsM = {   
    page         : false  ,   
    dhtmlXTree  : false ,   
    photo_tree  : false    
   };   
function getJSM(f)   
{   
    var reg = ///(/w+)/./;   
    jF = f.match(reg);   
    return jF[jF.length-1];   
}   
function loadJS(js)   
{   
 id = getJSM(js);   
 var scrīptId = document.getElementById(id);   
 var head = document.getElementsByTagName('head').item(0);   
 if(scrīptId)   
 {   
  //head.removeChild(id);   
 }   
 else  
 {   
  scrīpt  = document.createElement('scrīpt');   
  scrīpt.src = js;   
  scrīpt.type = 'text/javascrīpt';   
  scrīpt.id = id;   
  head.appendChild(scrīpt);   
 }   
}   
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载   
loadJS("page.js")   
[js] view plain copy
//所有的JS文件  
var jsM = {  
page         : false  ,  
dhtmlXTree  : false ,  
photo_tree  : false  
};  
function getJSM(f)  
{  
var reg = ///(/w+)/./;  
jF = f.match(reg);  
return jF[jF.length-1];  
}  
function loadJS(js)  
{  
id = getJSM(js);  
var scrīptId = document.getElementById(id);  
var head = document.getElementsByTagName('head').item(0);  
if(scrīptId)  
{  
//head.removeChild(id);  
}  
else  
{  
scrīpt  = document.createElement('scrīpt');  
scrīpt.src = js;  
scrīpt.type = 'text/javascrīpt';  
scrīpt.id = id;  
head.appendChild(scrīpt);  
}  
}  
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载  
loadJS("page.js")

Ce qui précède est le script JS de chargement dynamique que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Parcours des valeurs dans la collection EL expression List en javascript

Comment utiliser < ;script> el les expressions peuvent également être utilisées dans les balises

Analyse et réponses aux points clés de la réécriture et du polymorphisme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!