动态加载js的方法汇总


Posted in Javascript onFebruary 13, 2015

本文实例汇总了动态加载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程序设计有所帮助。

Javascript 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
ext jquery 简单比较
Apr 07 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
jQuery向后台传入json格式数据的方法
Feb 13 #Javascript
浅谈轻量级js模板引擎simplite
Feb 13 #Javascript
js实现拖拽效果
Feb 12 #Javascript
jQuery多个input求和的实现方法
Feb 12 #Javascript
JQuery实现防止退格键返回的方法
Feb 12 #Javascript
JavaScript自定义数组排序方法
Feb 12 #Javascript
You might like
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python的faker库用法
2019/11/28 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
黄埔军校观后感
2015/06/10 职场文书
团结友爱主题班会
2015/08/13 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
导游词之凤凰古城
2019/10/22 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript