javascript <object> 标记在 Chrome 中更改其数据属性时不会刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10366867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<object> tag doesn't refresh when its data attribute is changed in Chrome
提问by Tom Corelis
I have an <object>tag on a web page, whose dataattribute is changed programmatically in JS (jQuery, specifically). The datatag always points to a SVG image.
我<object>在网页上有一个标签，其data属性在 JS（特别是 jQuery）中以编程方式更改。该data标签始终指向 SVG 图像。
In Firefox, when the datatag 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.
在 Firefox 中，当data标签更改时，新的 SVG 加载并触发所有正确的事件。在 Chrome 中，只有在我单击 SVG 画布时才会发生这种情况——一旦发生这种情况，新的 SVG 显示及其相关事件都会触发。
Why is this? How can I force Chrome to refresh the <object>when I change its dataattribute?
为什么是这样？<object>当我更改其data属性时，如何强制 Chrome 刷新？
回答by Stanley Stuart
Well, I was reallybored 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 specdoesn't seem to have any mention of SVG, so there's a dead end. The HTML5 Spec Working Drafttells us that we can use datato invoke plugins and load content. The HTML5 Spec Editor's DraftdoesmentionSVG, telling us that SVG falls under the category of embedded content.
在HTML4规范似乎并不具备SVG的任何提及，所以有一个死胡同。在HTML5规范工作草案告诉我们，我们可以使用data调用插件和加载内容。在HTML5规格编者草案没有提及SVG，告诉我们，SVG的范畴属于嵌入的内容。
Because the Editor's Draftadds 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.)
因为编辑草案<object>为工作草案中定义的元素添加了额外的细节，所以我们可以说加载<object>元素的行为不是一个公认的标准。（如果我错了，请有人纠正我。）
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:
无论如何，在<object>规范中，除了关于浏览器应该如何通过 MIME 类型等解释对象的所有常用技术术语之外......我们找到了与这个问题相关的部分：
4.6: If the load failed(e.g. there was an HTTP 404 error, there was a DNS error), fire a simple eventnamed errorat 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 eventnamed loadat the element.
4.6：如果加载失败（例如，有一个 HTTP 404 错误，有一个 DNS 错误），在元素上触发一个名为error的简单事件，然后跳转到整个步骤集的最后一步（回退）。
...
10.：一旦资源完全加载，将任务排队以在元素上触发一个名为load的简单事件。
(Simple eventsmerely 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 Eventinterface)
（简单事件仅仅意味着事件不会冒泡（所以我们不能在任何父元素中监听它）并且不可取消，并且使用Event接口）
So, looking at this, I figured that if I select the <object>element off the DOM, it should have an onloadand onerrorevent, if not object.addEventListener. If you look at the Mozilla Developer Network docs for SVGand <object>, much of the JavaScript documentation is incomplete. Bummer.
所以，看着这个，我想如果我从<object>DOM 中选择元素，它应该有一个onloadandonerror事件，如果没有object.addEventListener。如果您查看有关SVG和的 Mozilla 开发人员网络文档<object>，就会发现大部分 JavaScript 文档都不完整。无赖。
Just goofing around with JSFiddle and the Chrome Dev Tools and Firefox Web Console, I found that they both supported onloadand onerror, or so I thought.
只是在 JSFiddle 和 Chrome Dev Tools 以及 Firefox Web Console 中闲逛，我发现它们都支持onload和onerror，或者我认为是这样。
Results of testing
测试结果
Google Chrome (18.0.1025.165) and Firefox (12.0)
谷歌浏览器 (18.0.1025.165) 和 Firefox (12.0)
Supports:
支持：
addEventListener('load', function(){})obj.onload = function(){};
addEventListener('load', function(){})obj.onload = function(){};
Does not support (events don't seem to fire):
不支持（事件似乎没有触发）：
addEventListener('error', function(){})obj.onerror = function(){}
addEventListener('error', function(){})obj.onerror = function(){}
As you can see from the fiddle, in Chrome using the loadevent causes infinite loops. It is not supposed to do this (according to the editor's draft):
从fiddle 中可以看出，在 Chrome 中使用该load事件会导致无限循环。它不应该这样做（根据编辑器的草案）：
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.
上述算法独立于 CSS 属性（包括 'display'、'overflow' 和 'visibility'）。例如，即使元素被“display:none”CSS 样式隐藏，它也会运行，并且如果元素的可见性发生变化，它也不会再次运行。
It looks like somebody already filed a bug, so if you would go and confirm the bug it would help the Chrome Developers Team.
看起来有人已经提交了一个错误，所以如果你去确认这个错误，它将有助于 Chrome 开发人员团队。
TL;DR
TL; 博士
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.
加载对象的行为还不是公认的标准，但您可以去验证Chromium 项目中的错误。您可以尝试按照@Hello71 的建议进行操作，并尝试从 DOM 中删除该元素并重新添加它，但我无法使其正常工作。
回答by Stéphane
Actually, I got exactly the same issue. Have a look at the http://jsfiddle.net/unesJ/, I solved it with the following code:
实际上，我遇到了完全相同的问题。看看http://jsfiddle.net/unesJ/，我用下面的代码解决了它：
The html:
html：
<object id="graph" data="image1.svg" type="image/svg+xml"></object>
The javascript:
javascript：
var new_url = 'image2.svg';
$('#graph').attr('data', new_url);
$('#graph').load(new_url);
It work for me on
它对我有用
- Chrome 24.0.1312.52 m
- Firefox 17.0.1
- 铬 24.0.1312.52 m
- 火狐 17.0.1
Hope it helps !
希望能帮助到你 ！
回答by ProLoser
I have tried quite a few things. Unfortunately I've had to resort to doing the following:
我已经尝试了很多东西。不幸的是，我不得不采取以下措施：
setTimeout(function(){
$('body').trigger('click');
}, 40);
No, I don't really have a better solution, but it gets the job done.
不，我真的没有更好的解决方案，但它可以完成工作。
