Javascript:图像对象的oneror事件有哪些参数?如何获取与图像相关的错误的其他详细信息

Javascript: Which parameters are there for the onerror event with image objects? How to get additional details on an error related to an image?

本文关键字：图像 获取 详细信息 其他 错误 何获取 事件 oneror 对象 Javascript 参数      更新时间：2023-12-07

我正在用JavaScript编写一个应用程序，它应该会创建一个新图像。有时它会失败。我能够通过附加一个image.onerror事件侦听器来检测它的时间。问题是：我如何了解发生了什么错误？图像的错误对象带来了什么参数？到目前为止，我只发现

image.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
  console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
  + ' Column: ' + column + ' StackTrace: ' +  errorObj);
}

我是从：javascript：如何在弹出警报中显示脚本错误？

返回Error: [object Event] Script: undefined Line: undefined Column: undefined StackTrace: undefined，在错误对象中我找不到任何与消息或错误代码相关的内容。

AFAIK image.onerror处理程序将接收一个不包含任何错误原因信息的单个Event参数。

Image.onerror附带了一个处理程序，而不是错误消息、url。。。

因此，参数列表中的第一项是一个事件。

如果你尝试你的代码与

image.onerror(errorMsg, url, lineNumber, column, errorObj) {
  console.log(errorMsg);
  console.log(url)
}

您应该为第一个日志获取一个事件，为第二个日志获取未定义的事件。

对于Image对象的繁重处理程序，我还找不到任何合法的参考。但看起来它主要用于向用户而不是开发人员标记错误。

如果您想在普通HTML img元素上捕获错误（而不是通过DOM动态创建错误），这似乎很好：

 <img src="http://yourdomain/site/badimage.png" 
      onerror="javascript:imageErrorHandler.call(this, event);"/>

请注意，.call(this, event)语法非常重要，因此您可以访问错误处理程序中的this和event对象。

然后，您可以定义一个图像错误处理程序，如下所示。（确保它是在img元素之前定义的，以避免竞争条件。）假设您已经连接了jQuery：

 function imageErrorHandler(evt) {
    var $e = $(this);
    var src = $e.attr("src");
    console.log("Image URL '" + src + "' is invalid.");
 };

在Chrome中进行了测试。尚未尝试其他浏览器。

确切的结果可能在一定程度上取决于您使用的浏览器，但您只能得到一个参数，即事件。我猜你找到的消息来源已经过时了。我黑了这个小JSFiddlehttp://jsfiddle.net/Lsag7pt6/所以你可以自己试试。只需在脚本底部注释正确和"错误"的URL，打开JavaScript控制台（F12），您就会看到事件的打印输出及其所有属性和值。

作为参考，对于我得到的正确URL：

Event {isTrusted: true, type: "load", target: img, currentTarget: img, eventPhase: 2…}
bubbles:false
cancelBubble:false
cancelable:false
composed:false
currentTarget:null
defaultPrevented:false
eventPhase:0
isTrusted:true
path:Array(6)
returnValue:true
srcElement:null
target:null
timeStamp:2109.725
type:"load"

否则

Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2…}
bubbles:false
cancelBubble:false
cancelable:false
composed:false
currentTarget:null
defaultPrevented:false
eventPhase:0
isTrusted:true
path:Array(7)
returnValue:true
srcElement:img
target:img
timeStamp:1189.805
type:"error"
相关文章：