动态加载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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
20个最新的jQuery插件
Jan 13 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
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
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python中文字符串截取问题
2015/06/15 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
Python变量类型知识点总结
2019/02/18 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
十八届三中全会学习方案
2014/02/16 职场文书
大学老师推荐信
2014/02/25 职场文书
天网工程实施方案
2014/03/26 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
群众路线剖析材料
2014/09/30 职场文书
地方课程教学计划
2015/01/19 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server