动态加载js的方法汇总-杰晶网络 2024/11/13

</script>

由于这种方式是异步加载，document.write会重写界面，明显不实用
方法二：动态改变已有script的src属性（异步）
复制代码代码如下:<script src='' id="xx"></script>
<script language="javascript">
    xx.src="/UploadFiles/2021-04-02/test.js"> </script>

此种方法不会改变界面元素，不重写界面元素，但同样是异步加载
方法三：动态创建script元素（异步）
复制代码代码如下:<script>
    var body= document.getElementsByTagName('BODY').[0];
    var script= document.createElement("script");
    script.type = "text/javascript";
    script.src="/UploadFiles/2021-04-02/xx.js">     body.appendChild( oScript);
</script>

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

方法四：XMLHttpRequest/ActiveXObject加载（异步）
复制代码代码如下:/**
* 异步加载js脚本
* @param id   需要设置的<script>标签的id
* @param url   js文件的相对路径或绝对路径
*/
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);
xmlHttp.onreadystatechange = function(){
//4代表数据发送完毕
if( xmlHttp.readyState == 4 ){
      //0为访问的本地，200到300代表访问服务器成功，
      //304代表没做修改访问的是缓存
      if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){
   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);
      }
}
}
//采用异步加载
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

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

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

方法五：XMLHttpRequest/ActiveXObject加载（同步）
复制代码代码如下:/**
* 同步加载js脚本
* @param id   需要设置的<script>标签的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 <300) || xmlHttp.status == 0 || xmlHttp.status == 304){
   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;
}
}