Javascript 对象标记'；s数据属性？
我将svg存储在s3存储桶中，并使用Javascript 对象标记'；s数据属性？,javascript,html,svg,Javascript,Html,Svg,我将svg存储在s3存储桶中，并使用object标记将其嵌入html页面，如下所示： <object type="image/svg+xml" data="url-to-svg-source" id="graph"></object> 然后我从S3触发了一个错误，就像这样 $("#graph").attr("data", badurl) 但是我没有看到我的错误侦听器触发。没有像onerror这样的事件名称。改为侦听错误事件： addEventListener( '
object<object type="image/svg+xml" data="url-to-svg-source" id="graph"></object>
$("#graph").attr("data", badurl)
但是我没有看到我的错误侦听器触发。没有像
onerror错误事件：
addEventListener(
'error',
// ...
只有在通过setter分配处理程序时，才能使用onerror
，例如
<element>.onerror = () => {
// do something
};
.onerror=（）=>{
//做点什么
};
好的，我一直在深入研究这一点，在我看来，浏览器在如何实现对象的HTML规范的这一部分方面是不一致的，我认为这相当于浏览器中的一个错误，我没有看到一致触发的错误事件
根据，如果存在数据属性，则浏览器应该执行几个步骤来加载资源，如果加载失败，浏览器应该在几个点上“触发名为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>
测试对象svg重新加载
此对象具有有效数据并加载蜜蜂徽标
这是退路
此对象在尝试加载其数据时将获得404
这是退路
在Chrome中，两个onload
事件都会被触发，我看到控制台上打印着“loaded bee logo”，后面是“loaded missing logo”
在Safari中，我只看到控制台上打印的“loaded bee徽标”
在Firefox中，我看到“加载丢失的徽标时出错”，然后控制台中会打印“加载的蜜蜂徽标” 啊，对不起！我在那里犯了一个愚蠢的错误。。但我刚刚确认，当我的事件侦听器使用addEventListener以正确的名称注册时，我不会看到它们被触发。（正在编辑我的帖子）。
<!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>