我希望能够知道动态添加的脚本中是否出现错误。这应该通过检查url
事件参数的onerror
属性来完成。
但是,当我在脚本开头添加事件侦听器时,即在动态添加脚本标记之前,如果在动态添加的脚本中发生错误,则url
属性为空。
所以我尝试在添加脚本标记后重新绑定事件,如
document.head.appendChild(scriptElement);
document.getElementById(scriptTagId).addEventListener('onerror',someErrorFunction);
以及
scriptElement.setAttribute('onerror','someErrorFunction(event);');
document.head.appendChild(scriptElement);
也喜欢
document.head.appendChild(scriptElement);
window.addEventListener('onerror',someErrorFunction);
但无济于事。实际上,错误甚至只是使用第一种方法捕获,即在脚本开头绑定onerror
事件。
答案 0 :(得分:2)
我认为您遇到问题,因为您正在通过id获取脚本元素。您可以使用简单的脚本加载器来实现最终结果。主要区别在于它绑定到脚本元素的onerror
和onload
属性,而不是使用事件侦听器
我使用window.onerror
并绑定到onafterscriptexecute
而非onload
并使用document.currentScript
获取脚本标记时,此脚本没有任何问题抛出错误。
window.onerror = function(message, source, lineno, colno, error){
console.log('window.error', {
message,
source,
lineno,
colno,
error,
src: document.currentScript.src
})
}
function loadScript(src, callback) {
console.log('loading: ' + src)
const script = document.createElement('script')
script.onerror = function() {
console.log('error loading script: ' + src)
}
script.onafterscriptexecute = callback
script.src = src
document.head.appendChild(script)
}
loadScript('http://codepen.io/synthet1c/pen/BLwWOb.js', function(){
console.log('this aint gonna happen')
})
loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', function(){
console.log('success loaded jQuery')
})