<object> 标签在 Chrome 中更改其数据属性时不会刷新 [重复]

Posted 2023-03-28

【中文标题】<object> 标签在 Chrome 中更改其数据属性时不会刷新 [重复]

【英文标题】：<object> tag doesn't refresh when its data attribute is changed in Chrome [duplicate]

【发布时间】：2012-05-09 03:50:30

【问题描述】：

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

在 Firefox 中，当 data 标记更改时，新的 SVG 会加载并触发所有正确的事件。在 Chrome 中，直到我单击 SVG 画布才会发生这种情况——一旦发生这种情况，新的 SVG 显示及其相关事件都会触发。

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

【参考方案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> 元素的行为不是公认的标准。 （如果我错了，请有人纠正我。）

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

4.6：如果加载失败（例如，有一个 HTTP 404 错误，有一个 DNS 错误），触发一个名为 error 的简单事件 strong> 在元素处，然后跳到整个步骤集的最后一步（后备）。

...

10.：资源完全加载后，排队一个任务以在元素上触发一个名为load的简单事件。 p>

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

所以，看着这个，我想如果我从 DOM 中选择 <object> 元素，它应该有一个 onload 和 onerror 事件，如果不是 object.addEventListener。如果您查看 SVG 和 <object> 的 Mozilla Developer Network 文档，就会发现大部分 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）：

上述算法独立于 CSS 属性（包括“显示”、“溢出”和“可见性”）。例如，即使元素被 'display:none' CSS 样式隐藏，它也会运行，并且如果元素的可见性发生变化，它也不会再次运行。

它看起来像某人already filed a bug，所以如果你去确认这个错误，它将帮助 Chrome 开发团队。

TL;DR

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

【讨论】：

只是想发表评论并说声谢谢 :-) 我有几个备选方案，我会在接下来尝试。

这似乎已在 2017 年 5 月的补丁中得到修复，但截至撰写本文时（2017 年 12 月），什么都没有发生。 bugs.chromium.org/p/chromium/issues/detail?id=445557

【参考方案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 m 火狐17.0.1

【讨论】：

这对我不起作用，我认为这是因为它实际上是将 URL 的内容放在元素中，而不是将 data 属性设置为 url。

【参考方案3】：

我已经尝试了很多东西。不幸的是，我不得不采取以下措施：

setTimeout(function()
  $('body').trigger('click');
, 40);

不，我真的没有更好的解决方案，但它可以完成工作。

【讨论】：

Hackish，但有时这是最好的解决方案...

实际上我不知道这甚至现在还有效，哈哈。这样的皮塔饼。我尝试的任何解决方案都得到了参差不齐的结果。