我有一个存储在 s3 存储桶中的 svg，我正在使用 object 标签将它嵌入到 html 页面中，如下所示:
<object type="image/svg+xml" data="url-to-svg-source" id="graph"></object>
有时，当浏览器尝试从 url 加载数据时，它会收到 403。我想注意到这个错误，如果发生这种情况，请尝试重新加载/重新渲染 svg 源，但我不知道如何注意到这个错误。必须有一种方法可以捕获我在 devtools 的 js 控制台中看到的错误。我试过注册一个事件监听器“onerror”，但它似乎没有被触发。也许只是在我的听众注册之前发生了错误？或者也许我在错误的对象上注册了它？
我试过在error 上注册一个监听器，就像这样
document
.getElementById("graph")
.addEventListener(
"error",
function(){ console.log("on error") })
然后我像这样从S3触发了一个错误
$("#graph").attr("data", badurl)
但我没有看到我的错误监听器触发..
最佳答案
好的，所以我一直在深入研究这个问题，在我看来，浏览器在如何为 object 实现这部分 HTML 规范方面并不一致，我认为这相当于浏览器中的错误，我没有看到一致触发的错误事件。
根据HTML5 specification ，如果存在数据属性，则浏览器应该执行几个步骤来加载资源，如果存在，浏览器应该“触发一个名为 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 事件都被触发，我在控制台中看到“loaded bee logo”，然后是“loaded missing logo”。
在 Safari 中，我只看到“加载的蜜蜂 Logo ”打印到控制台。
在 Firefox 中，我看到“加载缺少 Logo 时出错”，然后在控制台中打印“加载蜜蜂 Logo ”。
关于javascript - 对象标签的数据属性是否有错误事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55176323/