夏日博客

A-A+

jquery实现动态加载js文件的例子

2016年01月11日 前端设计 暂无评论 阅读 9 views 次

jquery动态加载有许多的方式并且也是非常的简单了，下文整理了一些关于jquery实现动态加载js文件的例子，希望这些动态加载js例子能够对各位有用。

一、jQuery getScript()方法加载javascript

jQuery内置了一个方法可以加载单一的js文件；当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getScript的方法是这样：

  1. jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {/* 
  2. 做一些加载完成后需要执行的事情 
  3. */});  
  4. 这个getScript方法返回一个jqxhr，你可以像下面这样用它：  
  5. jQuery.getScript("/path/to/myscript.js")  
  6. .done(function() {  
  7. /* 耶，没有问题，这里可以干点什么 */  
  8. })  
  9. .fail(function() {  
  10. /* 靠，马上执行挽救操作 */  
  11. });  

最常见的使用jQuery.getScript的地方是延迟加载一个js插件，而且在加载完成时执行它：

  1. jQuery.getScript("jquery.cookie.js")  
  2. .done(function() {  
  3. jQuery.cookie("cookie_name", "value", { expires: 7 });  
  4. });  

二、缓存问题

有一个非常重要的问题，使用jQuery.getScript时，你需要用一个时间戳字符串跟在需要加载的js地址后面，防止它被缓存。但是，如果你希望这个脚本被缓存，你需要设置全局缓存变量，像下面这样：

  1. jQuery.ajaxSetup({  
  2. cache: true  
  3. });  
  4. jQuery.ajax({ url: "jquery.cookie.js", dataType: "script", cache: true }).done(function() { jQuery.cookie("cookie_name", "value", { expires: 7 }); });  

在加载脚本时一定要小心缓存问题,动态加载Js、Css文件代码:

  1. //动态加载文件代码  
  2. $.extend({  
  3. includePath: ”,  
  4. include: function (file) {  
  5. var files = typeof fi le == “string” ? [fi le] : fi le;  
  6. for (var i = 0; i < files.length; i++) {  
  7. var name = fil es[i].replace(/^\s|\s$/g, “”);  
  8. var att = name.split(‘.’);  
  9. var ext = att[att.length – 1].toLowerCase();  
  10. var isCSS = ext == “css”;  
  11. var tag = isCSS ? “link” : “script”;  
  12. var attr = isCSS ? ” type=’text/css’ rel=’stylesheet’ ” : ” language=’javascript’ type=’text/javascript’ “;  
  13. var link = (isCSS ? “href” : “src”) + “='” + $.includePath + name + “‘”;  
  14. if ($(tag + “[” + link + “]”).length == 0) document.write(“”);  
  15. }  
  16. }  
  17. });  
  18. //使用方法  
  19. $.includePath = ‘Scripts/WorkSpace/';  
  20. $.include([‘GetVehicleGroup.js’]);  

注:代码系转载。不过已经使用过，很好使

2.立即使用Js文件中的方法

因为是动态加载的。考虑到网络原因。立即使用JS文件中的方法会报错。不过可以使用下边代码

  1. function _GetVehicleGroup() {  
  2. if (“undefined” == typeof (GetVehicleGroupIsOk)) {  
  3. setTimeout(“_GetVehicleGroup()”, 200);  
  4. return;  
  5. }  
  6. //动态加载JS文件中的方法  
  7. GetVehicleGroup();  
  8. }  

注:要在要加载的JS文件里加上一个标记，如：

var GetVehicleGroupIsOk = “enable”;

下面介绍三种异步执行加载Js 脚本的方法。

1、直接document.write

  1. <script language="javascript">  
  2.     document.write("<script src='test.js'><\/script>");  
  3. </script>  

2、动态改变已有script的src 属性

  1. <script src='' id="s1"></script>  
  2. <script language="javascript">  
  3.     s1.src="test.js"  
  4. </script>  

3、动态创建 script元素

  1. <script>  
  2.     var oHead = document.getElementsByTagName('HEAD').item(0);  
  3.     var oScript= document.createElement("script");  
  4.     oScript.type = "text/javascript";  
  5.     oScript.src="test.js";  
  6.     oHead.appendChild( oScript);  
  7. </script>  

注:这三种方法都是异步的，所以在采用这类方法动态加载Js 的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况。这时候可以考虑采用Ajax加载Js的方法。

大概原理:用XMLHTTP取得要脚本的内容，再创建 Script 对象。另外注意编码的保持一致。因为服务器与XML使用UTF8编码传送数据。

标签：

给我留言