原生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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
Vue 3.0 前瞻Vue Function API新特性体验
Aug 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
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php实现encode64编码类实例
2015/03/24 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python3基础之基本数据类型概述
2014/08/13 Python
Python常用知识点汇总
2016/05/08 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
报关简历自我评价怎么写
2013/09/19 职场文书
医院总经理职责
2013/12/26 职场文书
迟到检讨书800字
2014/01/13 职场文书
大学生创业感言
2014/01/25 职场文书
微信营销策划方案
2014/02/24 职场文书
安全生产计划书
2014/05/04 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
创业计划书之熟食店
2019/10/16 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
go goth封装第三方认证库示例详解
2022/08/14 Golang