动态加载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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Node调用Java的示例代码
Sep 20 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
Vue实现简易购物车页面
2020/12/30 Vue.js
使用Python爬取最好大学网大学排名
2018/02/24 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
如何基于Python实现数字类型转换
2020/02/07 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
自我推荐书
2013/12/04 职场文书
团队经理竞聘书
2014/03/31 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
大专毕业生求职信
2014/07/05 职场文书
齐云山导游词
2015/02/06 职场文书
在校学生证明格式
2015/06/24 职场文书
毕业设计工作总结
2015/08/14 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python 批量压缩图片的脚本
2021/06/02 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js