JavaScript动态加载脚本的loadScript函数实现详解
作者:代码拾荒时间:2026-10-27 17:24:54浏览:337
本文详细解析了JavaScript中用于动态加载外部脚本的loadScript函数。该函数支持URL直接调用或配置对象调用,提供异步加载、字符集指定及缓存控制等参数。通过动态创建script标签并插入DOM头部,结合load事件与readyState兼容处理,实现脚本加载完成后的回调执行,适用于需要按需加载JS资源的场景。
loadScript函数语法与参数说明
一、语法: loadScript(url[,callback]) 或者 loadScript(settings) 二、settings支持的参数: url:脚本路径 async:是否异步,默认false(HTML5) charset:文件编码 cache:是否缓存,默认为true success:加载成功后执行的函数,优先执行callback。 三、调用举例:
loadScript函数调用示例
代码如下:
//loadScript(url[,callback])
loadScript(“http://code.jquery.com/jquery.js”);
loadScript(“http://code.jquery.com/jquery.js”,function(){
console.log(1)
});
//loadScript(settings)
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8″,”cache”:false});
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8”,”success”:function(){
console.log(2)
}});
//或者你可以酱紫:
//loadScript(settings[,callback])
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8”},function(){
console.log($)
});四、源代码:
loadScript函数源码实现
代码如下:
function loadScript(url,callback) {
var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement,
script,
options,
if (typeof url === “object”) {
options = url;
url = undefined;
}
s = options || {};
url = url || s.url;
callback = callback || s.success;
script = document.createElement(“script”);
script.async = s.async || false;
script.type = “text/javascript”;
if (s.charset) {
script.charset = s.charset;
}
if(s.cache === false){
url = url+( /\?/.test( url ) ? “&” : “?” )+ “_=” +(new Date()).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
if(callback){
document.addEventListener ? script.addEventListener(“load”, callback, false) : script.onreadystatechange = function() {
if (/loaded|complete/.test(script.readyState)) {
script.onreadystatechange = null
callback()
}
}
}
}作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
