为什么我无法使用contentDocument访问Chrome中的SVG文件，但我可以在Firefox中使用？

Question

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

未捕获DOMException：无法阅读＆＃39; contentDocument＆＃39;属性来自＆＃39; HTMLObjectElement＆＃39;：阻止了一个带有原点＆＃34; null＆＃34;从访问跨源框架。

        <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>

Answer 1

我无法重现您正在观察的行为。我的猜测是，由于同源策略，对象标记的内容被chrome阻止。所以只测试没有localhost就行了。

Answer 2

如果您直接访问文件（就像confirm in your comment一样），Chrome的安全模型要求所有文件都在同一目录中。

Firefox的文件访问安全模型略有不同，如果子资源位于子目录以及当前目录中，则允许访问子资源。

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