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

Question

我<object>在网页上有一个标记,其data属性在JS(jQuery,特别是)中以编程方式更改.该data标签总是指向一个SVG图像.

在Firefox中,当data标记被更改时,新的SVG会加载并触发所有正确的事件.在Chrome中,直到我点击SVG画布才会发生这种情况 - 一旦发生这种情况,新的SVG显示及其相关事件全部触发.

为什么是这样？<object>当我更改其data属性时,如何强制Chrome刷新？

Answer 1

好吧,今晚我真的很无聊,我想做一些不是功课的事情,所以我为你挖掘了很多规格和论坛.

在HTML4规范似乎并不具备SVG的任何提及,所以有一个死胡同.在HTML5规范工作草案告诉我们,我们可以使用data调用插件和加载内容.在HTML5规格编者草案 没有 提及 SVG,告诉我们,SVG的范畴属于嵌入的内容.

由于编辑草案<object>为工作草案中定义的元素添加了额外的细节,我们可以说加载<object>元素的行为不是可接受的标准.(如果我错了,请有人纠正我.)

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

4.6:如果加载失败(例如,存在HTTP 404错误,则存在DNS错误),在元素处触发名为error的简单事件,然后跳转到整个步骤集中的最后一步(回退).

...

10:资源完全加载后,将任务排队以在元素上触发名为load的简单事件.

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

所以,看看这个,我想如果我从<object>DOM中选择元素,它应该有一个onload和onerror事件,如果没有object.addEventListener.如果你看一下Mozilla开发者网络文档的SVG和<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(){}

正如您从小提琴中看到的那样,在Chrome中使用该load事件会导致无限循环.它不应该这样做(根据编辑的草案):

上述算法独立于CSS属性(包括'display','overflow'和'visibility').例如,即使元素以"display:none"CSS样式隐藏,它也会运行,如果元素的可见性发生变化,则不会再次运行.

看起来有人已经提交了一个错误,所以如果你去确认这个错误,那将有助于Chrome开发人员团队.

TL; DR

加载对象的行为尚未被接受,但您可以验证Chromium项目中的错误.您可以尝试按@ Hello71建议并尝试从DOM中删除该元素并重新添加它,但我无法让它工作.

Answer 2

实际上,我得到了完全相同的问题.看看http://jsfiddle.net/unesJ/,我用以下代码解决了它:

html:

<object id="graph" data="image1.svg" type="image/svg+xml"></object>

javascript:

var new_url = 'image2.svg';
$('#graph').attr('data', new_url);
$('#graph').load(new_url);

它对我有用

• 镀铬24.0.1312.52米
• Firefox 17.0.1

希望能帮助到你 !