原生JS动态加载JS文件并执行回调的方法

作者:青柠时间:2026-10-22 17:33:02浏览:448

本文介绍如何使用原生JavaScript动态创建script标签以加载外部JS文件,并通过监听load事件(现代浏览器)或onreadystatechange事件(IE8及以下)来确保在文件加载完成后执行指定的回调函数,同时提供了兼容IE与标准浏览器的完整代码示例。

原生JS动态加载脚本及回调实现

本文介绍如何使用原生JavaScript动态创建script标签以加载外部JS文件,并通过监听load事件(现代浏览器)或onreadystatechange事件(IE8及以下)来确保在文件加载完成后执行指定的回调函数,同时提供了兼容IE与标准浏览器的完整代码示例。

在某些场景下,我们需要动态加载一个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动态加载脚本及回调实现

此外,这里补充一个封装好的函数实现。


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.jb51.net/code/HtmlJsRun对上述代码进行测试,以查看实际运行结果。

更多关于JavaScript的内容,读者可参考本站专题:《JavaScript文件与目录操作技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述的JavaScript动态加载脚本及回调函数的实现方法,能对读者的JavaScript程序设计工作有所帮助。

作者最新文章