试图在 script 标记上激发 onload 事件

我试图按顺序加载一组脚本，但 onload 事件没有触发。

    var scripts = [
'//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
'//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
MK.host+'/templates/templates.js'
];


function loadScripts(scripts){
var script = scripts.shift();
var el = document.createElement('script');
el.src = script;
el.onload = function(script){
console.log(script + ' loaded!');
if (scripts.length) {
loadScripts(scripts);
}
else {
console.log('run app');
MK.init();
}
};


$body.append(el);
}


loadScripts(scripts);

我猜当使用 jQuery 将元素附加到 DOM 时，el.onload 这样的本机事件不会触发。如果我使用本机 document.body.appendChild(el)，那么它会按预期触发。

174452 次浏览
小开
最佳答案

您应该将 src属性 之后设置为 onload事件，f.ex:

el.onload = function() { //...
el.src = script;

您还应该将脚本附加到连接 onload事件的 DOM before:

$body.append(el);
el.onload = function() { //...
el.src = script;

请记住，您需要检查 readystate是否支持 IE。如果您正在使用 jQuery，也可以尝试使用 getScript()方法: http://api.jquery.com/jQuery.getScript/

小开

我遇到过类似的问题，试图测试 jQuery 是否已经出现在页面上，如果没有强制加载，则执行一个函数。我试着用“ David Hellsing 变通方法”，但是没有机会满足我的需要。事实上，onload指令被立即评估，然后这个函数中的 $使用还不可能(是的，令人讨厌的“ $不是一个函数”^^).

因此，我参考了这篇文章: < a href = “ https://developer.mozilla.org/fr/docs/Web/Events/load”rel = “ nofollow norefrer”> https://developer.mozilla.org/fr/docs/web/events/load 并在脚本对象上附加一个事件侦听器。

var script = document.createElement('script');
script.type = "text/javascript";
script.addEventListener("load", function(event) {
console.log("script loaded :)");
onjqloaded(); // in fact, yourstuffscript() function
});
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

对于我的需要，它现在工作的很好。希望这能帮助其他人:)


提交答案