异步安全加载JavaScript文件的实现方法
作者:青柠时间:2026-10-29 12:33:22浏览:655
本文介绍了一种在页面加载完成后异步安全加载外部JavaScript文件的方法。通过封装addEvent兼容不同浏览器的事件绑定,并检测script标签的readyState状态,确保脚本加载完毕后再执行回调函数,适用于需要动态引入依赖库的场景。
异步安全加载JavaScript文件的方法
本文介绍了一种在页面加载完成后异步安全加载外部JavaScript文件的方法,供读者参考。
具体使用方式如下。
(function() {
__safeLoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", function() {
alert(jQuery);
});
})();
JavaScript核心实现代码如下:
window.__safeLoadScript = function(src, callback) {
function addEvent(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() { obj['e' + type + fn](window.event); }
obj.attachEvent('on' + type, obj[type + fn]);
} else
obj.addEventListener(type, fn, false);
}
function async_load(src, callback) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
var protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
s.src = protocol + src;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
s.onload = s.onreadystatechange = function() {
if(callback && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
callback();
}
};
}
addEvent(window, "load", function() {
async_load(src, callback);
});
};
希望上述内容对JavaScript程序设计有所帮助。
作者最新文章
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
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38
