原生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 相关文章推荐
javascript 出生日期和身份证判断大全
Nov 13 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
vue与django集成打包的实现方法
Nov 11 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
js中document.write的那点事
2014/12/12 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Python实现简单的2048小游戏
2021/03/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
情人节活动策划方案
2014/02/27 职场文书
校园标语大全
2014/06/19 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
限期整改通知书
2015/04/22 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers