Google Chrome浏览器在<object>标签中随机随机播放SVG图像

debugcn 发表于 Dev

杰里米

我有一个包含许多<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>

如何防止这种错误行为？

杰里米

这是Chromium渲染引擎Blink中的一个已知错误＃352762。目前已经提交了补丁，但是该错误尚未在发行版本中修复。

当前发行版的一种解决方法是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文件。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。