jquery动态加载js脚本文件方法示例

发布时间:2020-09-06编辑:脚本学堂
有关jquery动态加载js脚本文件的方法,动态加载javascript,不使用requirejs和dojo加载js,而使用jquery内置方法加载单个js文件,不了解的朋友参考下。

jquery有一个内置的方法可以用来加载单个js文件。
当需要延迟加载一些js插件或其它类型的文件时,可以使用此方法。

一、jquery getscript()方法加载javascript
jquery内置了一个方法可以加载单一的js文件;当加载完成后,可以在回调函数里执行后续操作。

最基本用法:
使用jquery.getscript方法加载:
 

复制代码 代码示例:
jquery.getscript("/path/to/myscript.js", function(data, status, jqxhr) {
 /*
  做一些加载完成后需要执行的事情
 */
});

这个getScript方法返回一个jqxhr,全用方法:
 

复制代码 代码示例:
jquery.getscript("/path/to/myscript.js")
 .done(function() {
  /* 耶,没有问题,这里可以干点什么 */
 })
 .fail(function() {
  /* 靠,马上执行挽救操作 */
});

最常见的使用jquery.getscript的地方是延迟加载一个js插件,而且在加载完成时执行它:
 

复制代码 代码示例:
jquery.getscript("jquery.cookie.js")
 .done(function() {
  jquery.cookie("cookie_name", "value", { expires: 7 });
});

二、缓存问题
使用jquery.getscript时,需要用一个时间戳字符串跟在需要加载的js地址后,防止它被缓存。
若希望脚本被缓存,需要设置全局缓存变量:
 

复制代码 代码示例:

jquery.ajaxsetup({
  cache: true
});

jquery.ajax({
      url: "jquery.cookie.js",
      datatype: "script",
      cache: true
}).done(function() {
  jquery.cookie("cookie_name", "value", { expires: 7 });
});
 

在加载脚本时,务必注意缓存问题。