动态加载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 删除字符串空格多种方法小结
Oct 24 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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
Zend引擎的发展 [15]
2006/10/09 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python连接数据库的方法
2017/10/19 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python常用函数与用法示例
2019/07/02 Python
python3中eval函数用法使用简介
2019/08/02 Python
python能做哪些生活有趣的事情
2020/09/09 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
教育局长自荐信范文
2013/12/22 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
幼儿教师工作感言
2014/02/14 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
企业宣传稿范文
2015/07/23 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
Moment的feature导致线上bug解决分析
2022/09/23 Javascript