原生JS动态加载JS文件并执行回调的方法
本文介绍如何使用原生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”,具体效果如下图所示:

此外,这里补充一个封装好的函数实现。
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程序设计工作有所帮助。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
