Javascript 为什么我不能在Chrome中使用contentDocument访问SVG文件，但我可以在Firefox中访问？

我使用Javascript访问SVG文件以更改特定Id的填充，它在Firefox中工作，但在Chrome中不工作。这是Chrome中出现的错误：

未捕获的DomeException:未能从“HTMLObjectElement”读取“contentDocument”属性：阻止原点为“null”的帧访问跨原点帧

        <script>
          function mapping(elem){
            var map = document.getElementById("Map");
            var mapDoc = map.contentDocument;
            mapDoc.getElementById(elem).style.fill = 'red';
          }
        </script>
        <object id="Map" data="images/Map.svg" type="image/svg+xml"></object>
        <button onclick="mapping('Gus');">Click</button>

函数映射（elem）{
var map=document.getElementById（“map”）；
var mapDoc=map.contentDocument；
mapDoc.getElementById（elem.style.fill='red'；
}
点击

我无法重现您观察到的行为。我的猜测是，由于同源策略，对象标记的内容被chrome阻止。因此，仅在没有localhost的情况下进行测试是不可行的。

如果您直接（像您一样）访问文件，Chrome的安全模型要求所有文件都位于同一目录中

Firefox有一个稍微不同的文件访问安全模型，它允许访问子资源，如果它们位于子目录以及当前目录中

---

如果通过web服务器访问文件，则可以在任何浏览器中使用web服务器允许的任何目录。

我通过文件访问。这是Chrome中出现的错误：未捕获DomeException:未能从“HTMLObjectElement”读取“contentDocument”属性：阻止了原点为“null”的帧是的，这就是我向你们描述的。如果您请求的svg的域与html的域不同，它将不允许。这称为同源策略。此外，如果您脱机尝试，它也不会工作，因为原点为“null”。您需要设置一个服务器并从localhost访问它，这样您就可以了。