什么使每个嵌入对象内容文档“独特”甚至具有相同对象源的两个（或更多）实例？

Question

我在HTML页面中放置了同一对象的多个实例。在我的情况下，我正在处理SVG，我有这样的事情：

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

对于每个对象使用完全相同的SVG源，我认为contentDocument在比较时是相同的但是我将以下代码放在源SVG中：

<script type="text/javascript"><![CDATA[
  async function compare_test(){
    await (new Promise(resolve => setTimeout(resolve,2000)));
    let objects = window.parent.document.getElementsByTagName("object");
    for (let i=objects.length-1; i>=0; i--){
      if (objects[i].contentDocument == this.document){
        console.log("matching object found:");
        console.log(objects[i]);
        break;
      }
    }
  }
]]></script>

令我惊讶的是，我发现事情很有效，匹配的对象似乎总是正确的！我想知道它怎么可能？那么......是否有一些浏览器机制使页面中对象的每个内容文档“都是唯一的”？它是什么？

Answer 1

这不是特定的浏览器机制。只是浏览器实际上比你想象的更简单。

三个嵌入的“文档”来自同一文件的事实是无关紧要的。它仍然是三个不同的对象，因为您明确指定了三个对象标记。三个SVG实例各自独立地解释（执行/呈现）。也许SVG中的一些脚本会产生一些随机的形状？然后你将有三个不同的图像。您需要意识到“文档”不仅仅是它来自的文件。文档保存文件的整个执行状态（最终保存其内部脚本）。所以它必须是那样的。

当然，由于缓存，浏览器肯定只提取一次“same.svg”。但是，它仍然执行了三次，因此，需要有三个不同的内容文档（每个文档都有自己的特定状态）。

因此，您使用的方法不会有任何歧义。