使用jQuery动态加载js脚本文件的方法


Posted in Javascript onApril 03, 2014

它们很强大,但有时候也会得不偿失。如果你使用的是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 });
});

在加载脚本时一定要小心缓存问题!
Javascript 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
用console.table()调试javascript
Sep 04 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
You might like
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python实现旋转和水平翻转的方法
2018/10/25 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
用python读取xlsx文件
2020/12/17 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
民族团结先进个人材料
2014/02/05 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
开票员岗位职责
2015/02/12 职场文书
2015新学期开学寄语
2015/02/26 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Anaconda配置各版本Pytorch的实现
2021/08/07 Python