Question

我有一个包含许多<object>个标签的HTML页面，每个标签都包含不同的SVG图像。

示例：

<object type="image/svg+xml" data="first.svg"></object>
<object type="image/svg+xml" data="totally-different.svg"></object>

在Google Chrome中，该页面最初会按预期显示。但是，如果我浏览页面，然后使用后退/前进按钮返回，则SVG图像会被洗牌：它们可能出现在错误的<object>标记内。

例：
在第一个视图中，页面按标记显示：

<object type="image/svg+xml" data="first.svg">
  <!-- first.svg will appear here -->
</object>
<object type="image/svg+xml" data="totally-different.svg">
  <!-- totally-different.svg will appear here -->
</object>

在后退/前进后，可以交换图像

<object type="image/svg+xml" data="first.svg">
  <!-- totally-different.svg will appear here! -->
</object>
<object type="image/svg+xml" data="totally-different.svg">
  <!-- first.svg will appear here! -->
</object>

如何防止这种错误行为？

Answer 1

这是一个已知错误，#352762，在Blink，Chromium的渲染引擎中。此时已提交补丁，但该漏洞尚未在发布版本中修复。

当前版本的解决方法是为每个name代码添加<object>属性：

<object type="image/svg+xml" data="first.svg" name="first">
</object>

<object type="image/svg+xml" data="totally-different.svg"
  name="totally-different">
</object>

在这种情况下，Chrome会在其缓存中正确识别SVG文件，而不是每次遇到<object>标记时都会分配随机缓存的SVG文件。

Answer 2

奇怪的是，这似乎仍然发生在当前版本中（43）。我假设这是一个更常见的对象标签错误，因为我的所有都有唯一的ID属性。如果你使用name属性，这个bug似乎只会消失 - 这有点讽刺，因为ID必须是唯一的！

Google Chrome会随机在<object>标记</object>中随机播放SVG图像

2 个答案: