动态加载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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
js中判断控件是否存在
2010/08/25 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python递归函数绘制分形树的方法
2018/06/22 Python
Python中按值来获取指定的键
2019/03/04 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python调用摄像头的示例代码
2020/09/28 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
非常详细的C#面试题集
2016/07/13 面试题
领导欢送会主持词
2015/07/06 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技