Question

我将svg存储在s3存储桶中，并使用object标签将其嵌入html页面中，如下所示：

<object type="image/svg+xml" data="url-to-svg-source" id="graph"></object>

有时，当浏览器尝试从url加载数据时，它会得到403。我想注意到此错误，并尝试重新加载/重新呈现svg源，但是我无法告知如何注意到这个错误。必须有一种方法可以捕获在devtools的js控制台中显示的错误。我尝试注册一个eventListener“ onerror”，但似乎没有触发。也许仅仅是在我的侦听器注册之前发生了错误？还是我在错误的对象上注册了它？

我已经尝试过在error上注册侦听器，

document
  .getElementById("graph")
  .addEventListener(
    "error", 
    function(){ console.log("on error") })

然后我像这样触发了S3的错误

$("#graph").attr("data", badurl)

但是我看不到我的错误监听器触发。

Answer 1

没有onerror这样的事件名称。改为监听error个事件：

addEventListener(
  'error',
  // ...

仅当通过设置器分配处理程序时，才使用onerror，例如

<element>.onerror = () => {
  // do something
};

Answer 2

好的，所以我一直在研究这个问题，在我看来，浏览器对于object的HTML规范这一部分的实现方式是不一致的，我认为这相当于我没有看到错误事件的浏览器会持续触发。

根据HTML5 specification，如果存在data属性，则浏览器应该执行几个步骤来加载资源，以及浏览器应该“触发一个简单事件”的几个步骤如果加载失败，则命名为error“。例如，如果无法解析URL，无法获取资源，获取404，等等。但是，似乎不同的浏览器在实现此规范方面不一致。

如果我将此html保存在本地并将其加载到Chrome，Safari和Firefox中，则会看到3种不同的结果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test object svg reload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <div class="panel">
      <div class="main">
        <div>This object has valid data and loads a bee logo</div>
        <object type="image/svg+xml"
                data="https://www.beeminder.com/legacy_images/infinibee.svg"
                id="beelogo"
                onload="console.log('loaded bee logo')"
                onerror="console.log('error loading bee logo')">
          <h2 id="fallback">This is the fallback</h2>
        </object>
      </div>
      <div class="main">
        <div>This object will get a 404 when trying to load its data</div>
        <object type="image/svg+xml"
                data= "https://beeminder-dev.s3-us-west-2.amazonaws.com/not-a-valid-file-name.svg"
                id="missinglogo"
                onload="console.log('loaded missing logo')"
                onerror="console.log('error loading missing logo')">
          <h2 id="fallback">This is the fallback</h2>
        </object>
      </div>
    </div>
  </body>
</html>

在Chrome中，两个onload事件均被触发，并且控制台上显示“加载的蜜蜂徽标”，随后显示“加载的丢失徽标”。

在Safari中，我只能在控制台上看到“加载的蜜蜂徽标”。

在Firefox中，我看到“错误加载缺少的徽标”，然后在控制台中显示“加载的蜜蜂徽标”。

对象标记的数据属性是否发生错误事件？

2 个答案: