原生JS实现动态加载js文件并在加载成功后执行回调函数的方法


Posted in Javascript onDecember 30, 2020

本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法。分享给大家供大家参考,具体如下:

有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的)。要实现这样的功能,可以使用<script> 元素的load 事件(IE9+、chrome、FireFox等)和onreadystatechange 事件(IE8以下),直接上代码:

function loadScript(src, callback) {
 var script = document.createElement('script'),
  head = document.getElementsByTagName('head')[0];
 script.type = 'text/javascript';
 script.charset = 'UTF-8';
 script.src = src;
 if (script.addEventListener) {
  script.addEventListener('load', function () {
   callback();
  }, false);
 } else if (script.attachEvent) {
  script.attachEvent('onreadystatechange', function () {
   var target = window.event.srcElement;
   if (target.readyState == 'loaded') {
    callback();
   }
  });
 }
 head.appendChild(script);
}

调用方法示例:

loadScript('http://cdn.staticfile.org/jquery/1.6.2/jquery.min.js',function(){
 console.log('onload');
});

运行后控制台输出onload,如下图所示:

原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

补充一个函数

function sk_loadScript(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);
}

if(typeof jQuery=='undefined'){
	sk_loadScript("/comments/js/jquery.js",function(){
		sk_main();
	});
}else{
	sk_main();
}

上述代码感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行一下,看看运行结果如何。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 #Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 #Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 #Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 #Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 #Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 #Javascript
mpvue写一个CPASS小程序的示例
Sep 04 #Javascript
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP之预定义接口详解
2015/07/29 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jsonp原理及使用
2013/10/28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
关于打架的检讨书
2014/01/17 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
保证书格式范文
2014/04/28 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
英文演讲稿
2014/05/15 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers