动态加载js的方法汇总

作者: 关于计算机  发布:2019-09-06

本文实例汇总了动态加载js的章程。分享给我们供大家参照他事他说加以考察。具体如下:

动态加载js的方法汇总,加载js汇总

正文实例汇总了动态加载js的点子。分享给大家供大家参照他事他说加以考察。具体如下:

方法一:直接document.write(异步)

复制代码 代码如下:

<script language="javascript">  
    document.write("<script src='res/extwidget/echarts/xx.js'></script>");
</script>

是因为这种办法是异步加载,document.write会重写分界面,显著不实用
格局二:动态退换已有script的src属性(异步)

复制代码 代码如下:

<script src='' id="xx"></script>  
<script language="javascript">  
    xx.src="test.js"  
</script>

此种方法不会变动分界面元素,不重写界面成分,但同样是异步加载
办法三:动态创立script成分(异步)

复制代码 代码如下:

<script>
    var body= document.getElementsByTagName('BODY').[0];  
    var script= document.createElement("script");  
    script.type = "text/javascript";  
    script.src="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; 
  } 
}

目的在于本文所述对大家的javascript程序设计具备扶助。

本文实例汇总了动态加载js的措施。分享给我们供我们参照他事他说加以考察。具体如下: 方法一:直接document.write(异步...

方法一:直接document.write(异步)

复制代码 代码如下:

<script language="javascript">  
    document.write("<script src='res/extwidget/echarts/xx.js'></script>");
</script>

鉴于这种办法是异步加载,document.write会重写分界面,显然不实用
形式二:动态改动已有script的src属性(异步)

复制代码 代码如下:

<script src='' id="xx"></script>  
<script language="javascript">  
    xx.src="test.js"  
</script>

此种方法不会转移分界面成分,不重写分界面成分,但同样是异步加载
主意三:动态创设script成分(异步)

复制代码 代码如下:

<script>
    var body= document.getElementsByTagName('BODY').[0];  
    var script= document.createElement("script");  
    script.type = "text/javascript";  
    script.src="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; 
  } 
}

可望本文所述对大家的javascript程序设计有所援救。

你或然感兴趣的作品:

  • 怎样促成JavaScript动态加载CSS和JS文件
  • 行使jquery动态加载Js文件和Css文件
  • 选取javaScript动态加载Js文件和Css文件
  • JS动态加载当前时光的不二诀窍
  • 运用jquery动态加载js文件的方法
  • jquery动态加载js/css文件情势(自写小函数)
  • 贰个轻巧易行的动态加载js和css的jquery代码
  • 采取jQuery动态加载js脚本文件的艺术
  • 动态加载js、css等文件跨iframe完毕
  • js 动态加载事件的几种办法总计
  • 动态加载dtree.js树treeview(示例代码)
  • 异步动态加载JS并运转(示例代码)
  • js完毕动态加载脚本的不二等秘书技实例汇总

本文由今晚买四不像发布于关于计算机,转载请注明出处:动态加载js的方法汇总

关键词:

上一篇:没有了
下一篇:没有了