我正在动态地将<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文件中放置特殊代码的解决方案是一个很好的解决方案。它不够优雅且不灵活。）
脚本标记没有错误事件。您可以判断它何时成功，并假设它在超时后未加载：
<script type="text/javascript" onload="loaded=1" src="....js"></script>
它在Safari中不起作用的原因是因为您正在使用属性语法。这将工作正常：
script_tag.addEventListener('error', function(){/*...*/}, true);
......除了在IE中。
如果要检查脚本是否已成功执行，只需使用该脚本设置变量并检查是否在外部代码中设置了该变量。
这可以使用promises安全地完成
function loadScript(src) {
return new Promise(function(resolve, reject) {
let script = document.createElement('script');
script.src = src;
script.onload = () => resolve(script);
script.onerror = () => reject(new Error("Script load error: " + src));
document.head.append(script);
});
}
并使用这样的
let promise = loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js");
promise.then(
script => alert(`${script.src} is loaded!`),
error => alert(`Error: ${error.message}`)
);
好吧，我能想到做你想做的一切的唯一方法就是非常丑陋。首先执行AJAX调用以检索Javascript文件内容。完成后，您可以检查状态代码以确定这是否成功。然后从xhr对象获取responseText并将其包装在try / catch中，动态创建脚本标记，对于IE，您可以将脚本标记的text属性设置为JS文本，在所有其他浏览器中，您应该能够将带有内容的文本节点附加到脚本标记。如果有任何代码需要脚本标记实际包含文件的src位置，这将不起作用，但在大多数情况下应该没问题。
建议设置超时，然后在超时后假设加载失败。
setTimeout(fireCustomOnerror, 4000);
这种方法的问题在于假设是基于偶然性的。超时到期后，请求仍处于暂挂状态。即使在程序员认为不会发生加载之后，也可能会加载对挂起脚本的请求。
如果请求可以取消，则程序可以等待一段时间，然后取消请求。
这就是我使用promise来检测窗口对象上发出的加载错误的方法：
<script type='module'>
window.addEventListener('error', function(error) {
let url = error.filename
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
url = url.substring(url.lastIndexOf("/") + 1, url.length);
window.scriptLoadReject && window.scriptLoadReject[url] && window.scriptLoadReject[url](error);
}, true);
window.boot=function boot() {
const t=document.createElement('script');
t.id='index.mjs';
t.type='module';
new Promise((resolve, reject) => {
window.scriptLoadReject = window.scriptLoadReject || {};
window.scriptLoadReject[t.id] = reject;
t.addEventListener('error', reject);
t.addEventListener('load', resolve); // Careful load is sometimes called even if errors prevent your script from running! This promise is only meant to catch errors while loading the file.
}).catch((value) => {
document.body.innerHTML='Error loading ' + t.id + '! Please reload this webpage.<br/>If this error persists, please try again later.<div><br/>' + t.id + ':' + value.lineno + ':' + value.colno + '<br/>' + (value && value.message);
});
t.src='./index.mjs'+'?'+new Date().getTime();
document.head.appendChild(t);
};
</script>
<script nomodule>document.body.innerHTML='This website needs ES6 Modules!<br/>Please enable ES6 Modules and then reload this webpage.';</script>
</head>
<body onload="boot()" style="margin: 0;border: 0;padding: 0;text-align: center;">
<noscript>This website needs JavaScript!<br/>Please enable JavaScript and then reload this webpage.</noscript>
恐怖事件
* 2017年8月更新：Chrome和Firefox解雇了onerror。 Internet Explorer触发了onload。边缘既不会发生恐怖也不会发生负载。我不会使用这种方法，但它可以在某些情况下使用。也可以看看
<link> onerror do not work in IE
*
定义和用法如果在加载外部文件（例如文档或图像）时发生错误，则会触发onerror事件。
提示：在音频/视频媒体上使用时，在媒体加载过程受到某种干扰时发生的相关事件包括：
在HTML中：
element onerror =“myScript”>
在JavaScript中，使用addEventListener（）方法：
object.addEventListener（“error”，myScript）;
注意：Internet Explorer 8和早期版本不支持addEventListener（）方法。
示例如果在加载图像时发生错误，则执行JavaScript：
img src =“image.gif”onerror =“myFunction（）”>
如果您只关心html5浏览器，则可以使用错误事件（因为这仅用于错误处理，因此只能在KISS IMHO的下一代浏览器上支持此功能）。
从规格：
如果src属性的值为空字符串或者无法解析，则用户代理必须将任务排队以在元素上触发名为error的简单事件，并中止这些步骤。
~
如果加载导致错误（例如DNS错误或HTTP 404错误）执行脚本块必须只包括在元素处触发名为error的简单事件。
这意味着您不必进行任何容易出错的轮询，并且可以将其与async和defer属性结合使用，以确保脚本不会阻止页面呈现：
即使指定了async属性，也可以指定defer属性，以使仅支持延迟（而非异步）的旧Web浏览器回退到延迟行为而不是默认的同步阻塞行为。
来自Erwinus的剧本效果很好，但编码不是很清楚。我冒昧地把它清理干净并破译它正在做的事情。我做了这些改变：
prototype。require()使用参数变量alert()消息再次感谢Erwinus，功能本身就是现货。
function ScriptLoader() {
}
ScriptLoader.prototype = {
timer: function (times, // number of times to try
delay, // delay per try
delayMore, // extra delay per try (additional to delay)
test, // called each try, timer stops if this returns true
failure, // called on failure
result // used internally, shouldn't be passed
) {
var me = this;
if (times == -1 || times > 0) {
setTimeout(function () {
result = (test()) ? 1 : 0;
me.timer((result) ? 0 : (times > 0) ? --times : times, delay + ((delayMore) ? delayMore : 0), delayMore, test, failure, result);
}, (result || delay < 0) ? 0.1 : delay);
} else if (typeof failure == 'function') {
setTimeout(failure, 1);
}
},
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
require: function (url, args) {
var me = this;
args = args || {};
var scriptTag = document.createElement('script');
var headTag = document.getElementsByTagName('head')[0];
if (!headTag) {
return false;
}
setTimeout(function () {
var f = (typeof args.success == 'function') ? args.success : function () {
};
args.failure = (typeof args.failure == 'function') ? args.failure : function () {
};
var fail = function () {
if (!scriptTag.__es) {
scriptTag.__es = true;
scriptTag.id = 'failed';
args.failure(scriptTag);
}
};
scriptTag.onload = function () {
scriptTag.id = 'loaded';
f(scriptTag);
};
scriptTag.type = 'text/javascript';
scriptTag.async = (typeof args.async == 'boolean') ? args.async : false;
scriptTag.charset = 'utf-8';
me.__es = false;
me.addEvent(scriptTag, 'error', fail); // when supported
// when error event is not supported fall back to timer
me.timer(15, 1000, 0, function () {
return (scriptTag.id == 'loaded');
}, function () {
if (scriptTag.id != 'loaded') {
fail();
}
});
scriptTag.src = url;
setTimeout(function () {
try {
headTag.appendChild(scriptTag);
} catch (e) {
fail();
}
}, 1);
}, (typeof args.delay == 'number') ? args.delay : 1);
return true;
}
};
$(document).ready(function () {
var loader = new ScriptLoader();
loader.require('resources/templates.js', {
async: true, success: function () {
alert('loaded');
}, failure: function () {
alert('NOT loaded');
}
});
});
我知道这是一个老线程，但我得到了一个很好的解决方案（我认为）。它是从我的一个类中复制的，它处理所有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');
});
});
要检查nonexistant.js中的javascript是否没有返回任何错误，您必须在http://fail.org/nonexistant.js中添加一个变量，如var isExecuted = true;，然后在加载脚本标记时检查它是否存在。
但是，如果您只想检查nonexistant.js返回时没有404（意味着它存在），您可以尝试使用isLoaded变量...
var isExecuted = false;
var isLoaded = false;
script_tag.onload = script_tag.onreadystatechange = function() {
if(!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") {
// script successfully loaded
isLoaded = true;
if(isExecuted) // no error
}
}
这将涵盖两种情况。
我的工作清洁解决方案（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);
})
}
正如马丁指出的那样，就像那样：
loaderScript("myscript.js")
.then(() => { console.log("loaded"); })
.catch(() => { console.log("error"); });
我希望这不会被低估，因为在特殊情况下，这是解决问题的最可靠方法。只要服务器允许您使用CORS（http://en.wikipedia.org/wiki/Cross-origin_resource_sharing）获取Javascript资源，您就拥有了丰富的选项来执行此操作。
使用XMLHttpRequest获取资源将适用于所有现代浏览器，包括IE。由于您希望加载Javascript，因此您首先可以使用Javascript。您可以使用readyState（http://en.wikipedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener）跟踪进度。最后，一旦收到文件的内容，就可以使用eval（）执行它。是的，我说eval - 因为安全方面它与正常加载脚本没什么不同。实际上，John Resig建议使用类似的技术来获得更好的标签（http://ejohn.org/blog/degrading-script-tags/）。
此方法还允许您将加载与eval分开，并在eval发生之前和之后执行函数。当并行加载脚本但逐个评估它们时，它变得非常有用 - 当您将标记放在HTML中时，浏览器可以轻松完成这些操作，但是不要让您在运行时使用Javascript添加脚本。
CORS也比JSONP更适合加载脚本（http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests）。但是，如果您要开发自己的第三方小部件以嵌入其他网站，您实际上应该在自己的iframe中加载来自您自己域的Javascript文件（同样，使用AJAX）
简而言之：
改善它：
这个技巧对我有用，虽然我承认这可能不是解决这个问题的最佳方法。而不是尝试这个，你应该看到javascripts没有加载的原因。尝试在服务器等中保留脚本的本地副本，或者与您尝试下载脚本的第三方供应商联系。
无论如何，所以这里是解决方法：1）将变量初始化为false 2）当javascript加载时（使用onload属性）将其设置为true 3）在HTML主体加载后检查变量是真还是假
<html>
<head>
<script>
var scriptLoaded = false;
function checkScriptLoaded() {
if (scriptLoaded) {
// do something here
} else {
// do something else here!
}
}
</script>
<script src="http://some-external-script.js" onload="scriptLoaded=true;" />
</head>
<body onload="checkScriptLoaded()">
<p>My Test Page!</p>
</body>
</html>
这是另一个没有任何计时器的基于JQuery的解决方案：
<script type="text/javascript">
function loadScript(url, onsuccess, onerror) {
$.get(url)
.done(function() {
// File/url exists
console.log("JS Loader: file exists, executing $.getScript "+url)
$.getScript(url, function() {
if (onsuccess) {
console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
onsuccess();
console.log("JS Loader: done with onsuccess() for " + url);
} else {
console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
}
});
}).fail(function() {
// File/url does not exist
if (onerror) {
console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
onerror();
console.error("JS Loader: done with onerror() for " + url);
} else {
console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
}
});
}
</script>
感谢：https://stackoverflow.com/a/14691735/1243926
样品用法（来自JQuery getScript documentation的原始样品）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.getScript demo</title>
<style>
.block {
background-color: blue;
width: 150px;
height: 70px;
margin: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div class="block"></div>
<script>
function loadScript(url, onsuccess, onerror) {
$.get(url)
.done(function() {
// File/url exists
console.log("JS Loader: file exists, executing $.getScript "+url)
$.getScript(url, function() {
if (onsuccess) {
console.log("JS Loader: Ok, loaded. Calling onsuccess() for " + url);
onsuccess();
console.log("JS Loader: done with onsuccess() for " + url);
} else {
console.log("JS Loader: Ok, loaded, no onsuccess() callback " + url)
}
});
}).fail(function() {
// File/url does not exist
if (onerror) {
console.error("JS Loader: probably 404 not found. Not calling $.getScript. Calling onerror() for " + url);
onerror();
console.error("JS Loader: done with onerror() for " + url);
} else {
console.error("JS Loader: probably 404 not found. Not calling $.getScript. No onerror() callback " + url);
}
});
}
loadScript("https://raw.github.com/jquery/jquery-color/master/jquery.color.js", function() {
console.log("loaded jquery-color");
$( "#go" ).click(function() {
$( ".block" )
.animate({
backgroundColor: "rgb(255, 180, 180)"
}, 1000 )
.delay( 500 )
.animate({
backgroundColor: "olive"
}, 1000 )
.delay( 500 )
.animate({
backgroundColor: "#00f"
}, 1000 );
});
}, function() { console.error("Cannot load jquery-color"); });
</script>
</body>
</html>