javascript - <object> 标记在 Chrome 中更改其数据属性时不会刷新

Question

<分区>

Answer 1

好吧，今晚我真的很无聊，我想做点功课以外的事情，所以我为您浏览了很多规范和论坛。

HTML4 spec似乎没有提到 SVG，所以这是一个死胡同。 HTML5 Spec Working Draft告诉我们可以使用 data调用插件和加载内容。 HTML5 Spec Editor's Draft 有 mention SVG，告诉我们 SVG 属于 embedded content 的类别.

因为 Editor's Draft在 <object> 中添加额外的细节Working Draft 中定义的元素，我们可以说加载 <object> 的行为elements 不是公认的标准。(如果我错了，请有人纠正我。)

无论如何，在<object>规范，除了关于浏览器应该如何通过 MIME 类型等解释对象的所有常用技术术语之外......我们找到与这个问题相关的部分:

4.6: If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire a simple event named error at the element, then jump to the last step in the overall set of steps (fallback).

...

10.: Once the resource is completely loaded, queue a task to fire a simple event named load at the element.

( Simple events 仅仅意味着事件不会冒泡(所以我们不能在任何父元素中监听它)并且不可取消，并使用 Event 接口(interface))

所以，看着这个，我想如果我选择 <object>元素离开 DOM，它应该有一个 onload和 onerror事件，如果不是object.addEventListener .如果您查看 SVG 的 Mozilla 开发者网络文档和 <object> , 许多 JavaScript 文档是不完整的。真可惜。

只是闲逛 JSFiddle 和 Chrome 开发工具和 Firefox Web 控制台，我发现它们都支持 onload和 onerror ，或者我是这么想的。

测试结果

谷歌浏览器 (18.0.1025.165) 和 Firefox (12.0)

支持:

• addEventListener('load', function(){})
• obj.onload = function(){};

不支持(事件似乎不触发):

• addEventListener('error', function(){})
• obj.onerror = function(){}

从fiddle可以看出, 在 Chrome 中使用 load事件导致无限循环。它不应该这样做(根据 editor's draft ):

The above algorithm is independent of CSS properties (including 'display', 'overflow', and 'visibility'). For example, it runs even if the element is hidden with a 'display:none' CSS style, and does not run again if the element's visibility changes.

看起来像某人already filed a bug ，所以如果您愿意去确认错误，这将有助于 Chrome 开发团队。

长话短说

加载对象的行为还不是公认的标准，但你可以去验证一个 bug in the Chromium project .您可以尝试按照@Hello71 的建议进行操作，并尝试从 DOM 中删除该元素并重新添加它，但是 I couldn't get it to work .