Javascript - onerror事件在firefox中不起作用

Question

<img style="" src="" onerror='this.style.visibility = "hidden"' />

如果无法找到,这个非常简单的onerror事件处理程序会隐藏图像.

它在Chrome中按预期工作,但在Firefox中,它什么都不做.

这是一个jsFiddle,您可以尝试在Chrome和Firefox中运行以查看它的实际运行情况.

http://jsfiddle.net/y9e88ack/

为什么firefox不起作用？

任何帮助,将不胜感激

Answer 1

我不确定浏览器之间的内部推理,但是onerror当提供无效的非空属性时,Firefox会很乐意触发回调.例如:

<img style="" src="asdf.jpg" onerror='this.style.visibility = "hidden"' />

演示: http ://jsfiddle.net/18ga9hh8/

在这两种浏览器中,当存在空src属性时,不会向服务器发出请求(使用开发人员工具的网络选项卡进行监视).

当提供无效的非空时src,发出请求并且都接收404响应,触发onerror回调(预期).

正如您所指出的,使用一个值"?"强制您在两个浏览器上的所需行为.它做的是做一个请求(可以是当前页面的URL,或当前页面的目录,因为它被认为是一个相对路径 - 取决于浏览器的设计目的),但无法将其应用为图像(它是一个HTML响应),导致错误.

如果您想知道或关心,HTML5规范会说明这个src属性:

src属性必须存在,并且必须包含一个有效的非空URL,该URL可能由引用非交互式(可选动画)图像资源的空间包围,该图像资源既不是分页也不是脚本化.

如果你在页面上稍微向下看一下当用户代理要更新img元素的图像数据时,它必须运行以下步骤,#10说明如下:

如果selected source为null,则将该元素设置为broken状态,将任务排队以在img元素上触发名为error的简单事件,并中止这些步骤.

所以看起来Firefox并没有遵守规范,但也许我解释错了？

使用W3C验证器,空src属性会导致验证错误,而使用值"?"有效(请记住整个相对路径的事情？).请注意,添加查询字符串(?应该做什么)应该导致浏览器永远不会缓存图像,因此我不认为如果需要,可以使用此方法实现实际图像的缓存.