窗口.Onerror:当动态添加的脚本(通过脚本标签)出错时，url属性为空

window.onerror: url property empty when error in dynamically added script (via script tag)

本文关键字：脚本 出错 url 属性 标签 Onerror 动态 添加 窗口      更新时间：2023-09-26

我想要能够做的是知道在动态添加的脚本中是否发生了错误。这应该通过检查onerror事件参数的url属性来完成。

然而，当我在脚本的开始添加事件侦听器时，即在脚本标签被动态添加之前，如果在动态添加的脚本中发生错误，则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事件。

我认为你有一个问题，因为你是通过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')
})

相关文章：