<对象>标记在Chrome中更改其数据属性时不会刷新 [英] <object> tag doesn't refresh when its data attribute is changed in Chrome

问题描述

我在网页上有一个< object> 标记，它的 data 属性在JS中以编程方式更改（特别是jQuery）。 data 标记总是指向一个SVG图像。

在Firefox中，当数据标记发生变化，新的SVG加载并触发所有正确的事件。在Chrome中，直到我点击SVG画布时才会发生这种情况 - 一旦发生这种情况，新的SVG显示及其相关事件都将触发。

为什么会这样？当我更改数据属性时，如何强制Chrome刷新< object> ？

解决方案

嗯，我真的很无聊，今晚我想做一些不是功课的东西，所以我挖了很多规格和论坛给你。

HTML4规范似乎没有提及SVG，所以有一个死路一条。 HTML5规范工作草案告诉我们，我们可以使用数据来调用插件并加载内容。 HTML5规范编辑器草稿 不会 提及 SVG，告诉我们SVG属于嵌入式内容。

由于编辑草稿为<$ c添加了更多详细信息在工作草案中定义的$ c>< object> / a>，我们可以说加载< object> 元素的行为不是一个可接受的标准。（有人请纠正我，如果我错了。）

无论如何，在< object> 规范中，除了所有通常的技术术语外，浏览器应该通过MIME类型等解释对象c ...我们发现与此问题相关的部分：

4.6：如果加载失败（例如存在HTTP 404错误，出现DNS错误），在元素上触发名为错误的简单事件，然后跳转到整个步骤集中的最后一步（后备）。

...

10 .:资源完全加载 / strong>，排列任务以在元素上触发名为加载的简单事件。

（ 简单活动仅仅意味着这些事件不会冒泡（所以我们不能在任何父元素中监听它）并且不可取消，并使用 Event interface ）

>

所以，看着这个，我想如果我从DOM中选择< object> 元素，它应该有一个 onload 和 onerror 事件，如果不是 object.addEventListener 。如果您查看 SVG 和 < object> ，大部分JavaScript文档都是不完整的。 Bummer。

只需使用JSFiddle和Chrome开发工具和Firefox Web控制台，我发现它们都支持 onload 和 onerror ，或者我想。

测试结果

Google Chrome（18.0.1025.165）和Firefox（12.0）

支持：

• addEventListener（'load'，function（）{}）
obj.onload = function（）{};

不支持（事件似乎不会触发）：

• addEventListener（'error'，function（）{}）


• obj.onerror = function（）{}
  
  

  从小提琴，在Chrome中使用加载事件导致无限循环。它不应该这样做（根据编辑的草稿）：b
  $ b

  
  

  以上算法独立于CSS属性（包括'display'，'overflow'和'visibility'）。例如，即使该元素被隐藏了一个'display：none'CSS样式，并且如果该元素的可见性发生变化，该元素也不会再运行。

  
  

  它看起来像某人已经提交了一个bug ，所以如果你愿意去确认这个bug，这将有助于Chrome开发者团队。

  
  
  

  TL; DR

  
  
  

  对象还不是公认的标准，但您可以在Chromium项目中验证错误。你可以按照@Hello71的建议尝试做，并尝试从DOM中删除元素并重新添加它，但是我无法使它工作。

  
  

  I have an <object> tag on a web page, whose data attribute is changed programmatically in JS (jQuery, specifically). The data tag always points to a SVG image.

  In Firefox, when the data tag is changed, the new SVG loads and all the proper events fire. In Chrome, this doesn't occur until I click on the SVG canvas -- once that happens, the new SVG displays and its associated events all fire.

  Why is this? How can I force Chrome to refresh the <object> when I change its data attribute?

  解决方案

  Well, I was really bored tonight and I wanted to do something that wasn't schoolwork, so I dug through a lot of specs and forums for you.

  The HTML4 spec doesn't seem to have any mention of SVG, so there's a dead end. The HTML5 Spec Working Draft tells us that we can use data to invoke plugins and load content. The HTML5 Spec Editor's Draft does mention SVG, telling us that SVG falls under the category of embedded content.

  Because the Editor's Draft adds additional detail to the <object> element as defined in the Working Draft, we could say that the behavior of loading <object> elements is not an accepted standard. (Somebody please correct me if I'm wrong.)

  Anyway, in the <object> specification, aside from all the usual technical jargon about how the browser should interpret the object by MIME-type etc... We find the part that's relevant to this question:

  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 merely mean that the events do not bubble (so we can't listen for it in any parent elements) and are not cancelable, and use the Event interface)

  So, looking at this, I figured that if I select the <object> element off the DOM, it should have an onload and onerror event, if not object.addEventListener. If you look at the Mozilla Developer Network docs for SVG and <object>, much of the JavaScript documentation is incomplete. Bummer.

  Just goofing around with JSFiddle and the Chrome Dev Tools and Firefox Web Console, I found that they both supported onload and onerror, or so I thought.

  Results of testing

  Google Chrome (18.0.1025.165) and Firefox (12.0)

  Supports:

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

  Does not support (events don't seem to fire):

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

  As you can see from the fiddle, in Chrome using the load event causes infinite loops. It is not supposed to do this (according to the 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.

  It looks like somebody already filed a bug, so if you would go and confirm the bug it would help the Chrome Developers Team.

  TL;DR

  The behavior for loading objects is not an accepted standard yet, but you can go verify a bug in the Chromium project. You could try doing as @Hello71 suggested and try removing the element from the DOM and re-adding it, but I couldn't get it to work.

  这篇关于&LT;对象&gt;标记在Chrome中更改其数据属性时不会刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！