如何判断<script>标记是否加载失败
如何判断<script>标记是否加载失败
提问于 2009-02-12 04:57:51
我动态地将<script>标记添加到页面的<head>中，并且我希望能够知道加载是否以某种方式失败-- 404、加载的脚本中的脚本错误等等。
在Firefox中，这是可行的：
var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);然而，这在IE或Safari中不起作用。
有没有人知道在Firefox以外的浏览器中实现这一功能的方法？
(我不认为需要在.js文件中放置特殊代码的解决方案是好的。这是不优雅和不灵活的。)
回答 12
Stack Overflow用户
发布于 2009-02-11 21:12:23
脚本标记没有错误事件。您可以判断它何时成功，并假定它在超时后尚未加载：
<script type="text/javascript" onload="loaded=1" src="....js"></script>Stack Overflow用户
发布于 2017-06-02 17:45:33
我的工作清洁解决方案(2017)
function loaderScript(scriptUrl){
return new Promise(function (res, rej) {
let script = document.createElement('script');
script.src = scriptUrl;
script.type = 'text/javascript';
script.onError = rej;
script.async = true;
script.onload = res;
script.addEventListener('error',rej);
script.addEventListener('load',res);
document.head.appendChild(script);
})
}就像马丁指出的那样，用起来像这样：
const event = loaderScript("myscript.js")
.then(() => { console.log("loaded"); })
.catch(() => { console.log("error"); });或
try{
await loaderScript("myscript.js")
console.log("loaded");
}catch{
console.log("error");
}Stack Overflow用户
发布于 2011-08-05 04:26:15
我知道这是一个古老的主题，但我有一个很好的解决方案给你(我想)。它是从我的一个类复制过来的，这个类处理所有AJAX的东西。
当脚本无法加载时，它会设置一个错误处理程序，但当错误处理程序不受支持时，它会返回到检查错误的计时器，时间为15秒。
function jsLoader()
{
var o = this;
// simple unstopable repeat timer, when t=-1 means endless, when function f() returns true it can be stopped
o.timer = function(t, i, d, f, fend, b)
{
if( t == -1 || t > 0 )
{
setTimeout(function() {
b=(f()) ? 1 : 0;
o.timer((b) ? 0 : (t>0) ? --t : t, i+((d) ? d : 0), d, f, fend,b );
}, (b || i < 0) ? 0.1 : i);
}
else if(typeof fend == 'function')
{
setTimeout(fend, 1);
}
};
o.addEvent = function(el, eventName, eventFunc)
{
if(typeof el != 'object')
{
return false;
}
if(el.addEventListener)
{
el.addEventListener (eventName, eventFunc, false);
return true;
}
if(el.attachEvent)
{
el.attachEvent("on" + eventName, eventFunc);
return true;
}
return false;
};
// add script to dom
o.require = function(s, delay, baSync, fCallback, fErr)
{
var oo = document.createElement('script'),
oHead = document.getElementsByTagName('head')[0];
if(!oHead)
{
return false;
}
setTimeout( function() {
var f = (typeof fCallback == 'function') ? fCallback : function(){};
fErr = (typeof fErr == 'function') ? fErr : function(){
alert('require: Cannot load resource -'+s);
},
fe = function(){
if(!oo.__es)
{
oo.__es = true;
oo.id = 'failed';
fErr(oo);
}
};
oo.onload = function() {
oo.id = 'loaded';
f(oo);
};
oo.type = 'text/javascript';
oo.async = (typeof baSync == 'boolean') ? baSync : false;
oo.charset = 'utf-8';
o.__es = false;
o.addEvent( oo, 'error', fe ); // when supported
// when error event is not supported fall back to timer
o.timer(15, 1000, 0, function() {
return (oo.id == 'loaded');
}, function(){
if(oo.id != 'loaded'){
fe();
}
});
oo.src = s;
setTimeout(function() {
try{
oHead.appendChild(oo);
}catch(e){
fe();
}
},1);
}, (typeof delay == 'number') ? delay : 1);
return true;
};
}
$(document).ready( function()
{
var ol = new jsLoader();
ol.require('myscript.js', 800, true, function(){
alert('loaded');
}, function() {
alert('NOT loaded');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/538745
复制相关文章
相似问题
腾讯云开发者
