动态加载js的方法汇总_javascript技巧

本文实例汇总了动态加载js的方法。分享给大家供大家参考。具体如下：

方法一：直接document.write（异步）

复制代码 代码如下:

");

由于这种方式是异步加载，document.write会重写界面，明显不实用
方法二：动态改变已有script的src属性（异步）

复制代码 代码如下:

  

此种方法不会改变界面元素，不重写界面元素，但同样是异步加载
方法三：动态创建script元素（异步）

复制代码 代码如下:

<script><br />     var body= document.getElementsByTagName('BODY').[0];   <br />     var script= document.createElement("script");   <br />     script.type = "text/javascript";   <br />     script.src="xx.js";   <br />     body.appendChild( oScript);   <br /> </script>

此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载

方法四：XMLHttpRequest/ActiveXObject加载（异步）

复制代码 代码如下:

/**
* 异步加载js脚本
* @param id   需要设置的<script>标签的id <br /> * @param url   js文件的相对路径或绝对路径 <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 /> //发送同步请求，<br /> //如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错  <br /> xmlHttp.send(null);  <br /> xmlHttp.onreadystatechange = function(){  <br />   //4代表数据发送完毕  <br />   if( xmlHttp.readyState == 4 ){  <br />       //0为访问的本地，200到300代表访问服务器成功，<br />       //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 />       }  <br />   }  <br /> }  <br /> //采用异步加载  <br /> xmlHttp.open("GET",url,true);  <br /> xmlHttp.send(null);  <br /> }</script>

open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件

这四种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行。

方法五：XMLHttpRequest/ActiveXObject加载（同步）

复制代码 代码如下:

/**
* JS-Skript
synchron laden * @param id Die ID des <script>-Tags, das festgelegt werden muss <br /> * @param url Relativer Pfad oder absoluter Pfad der JS-Datei <br /> * @return {Boolean} Gibt zurück, ob der Ladevorgang erfolgreich war, true steht für Erfolg, false steht für Fehler <br />*/ <br /> loadJs:function(id,url){ <br />  <br /> var xmlHttp = null; if(window.ActiveXObject){//IE <br /> Versuchen Sie es mit { <br /> //Kann in IE6 und späteren Versionen verwendet werden <br /> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } Catch (e) { <br /> //IE5.5 und spätere Versionen können verwendet werden <br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }  <br /> }else if(window.XMLHttpRequest){ <br /> //Firefox, Opera 8.0, Safari, Chrome <br /> xmlHttp = new XMLHttpRequest(); } <br /> //Synchrones Laden verwenden <br /> xmlHttp.open("GET",url,false); <br /> //Sende eine synchrone Anfrage. Wenn der Browser Chrome oder Opera ist, muss er vor der Ausführung veröffentlicht werden, andernfalls wird ein Fehler gemeldet <br /> xmlHttp.send(null); <br /> //4 bedeutet, dass die Daten gesendet wurden <br /> if(xmlHttp.readyState == 4){ <br /> //0 ist der lokale Zugriff, 200 bis 300 bedeutet, dass der Zugriff auf den Server erfolgreich ist, 304 bedeutet, dass auf den Cache ohne Änderung zugegriffen wird <br /> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br /> var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "script" ); myScript.sprache = "javascript"; myScript.type = "text/javascript"; myScript.id = id; <br /> versuche es{ <br /> //IE8 und niedriger unterstützen diese Methode nicht und müssen über das Textattribut <br /> festgelegt werden myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }catch (ex){ <br /> myScript.text = xmlHttp.responseText; }  <br /> myBody.appendChild(myScript); <br /> Rückgabe wahr; <br /> }else{ <br /> Rückgabe falsch; <br /> }  <br /> }else{ <br /> Rückgabe falsch; <br /> } <br /> }<br /><br /> <br />Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird. <br /></script>