动态加载JavaScript文件的3种方式


Posted in Javascript onMay 05, 2018

以下是遇到的几种动态加载JavaScript文件的方式,持续更新中。。。

一、使用document.write/writeln()方式

该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。

实现方式:

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的转义。

二、使用jQuery

使用getScript(url,callback)方法实现动态加载js文件

$.getScript('test.js',function(){
 alert('done');
});

三、使用原生js方法

原理:动态创建script标签,并指定script的src属性

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

还可以使用同样的原理动态加载css文件,只不过插入的的父节点是head标签。

以上就是动态加载JavaScript文件的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
Vue项目全局配置微信分享思路详解
May 04 #Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
You might like
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PDO::inTransaction讲解
2019/01/28 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
Python模块文件结构代码详解
2018/02/03 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python实现udp聊天窗口
2020/03/31 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python 实现简单的客户端认证
2020/07/29 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
专升本个人自我评价
2013/12/22 职场文书
《理想》教学反思
2014/02/17 职场文书
简单租房协议书范本
2014/08/20 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
指导教师推荐意见
2015/06/05 职场文书
配置nginx负载均衡
2022/05/06 Servers