为什么我不能在Chrome中使用contentDocument来访问SVG文件，但是在Firefox中却可以呢? [英] Why can I not acces with contentDocument to a SVG file in Chrome but I can in Firefox?

问题描述

我使用Java脚本访问SVG文件以更改特定ID的填充，它在Firefox中有效，但在Chrome中不起作用.这是Chrome中出现的错误:

I access to my SVG file with Javascript to change the specific Id's fill, it works in Firefox but not in Chrome. This is the error appears in Chrome:

未捕获的DOMException:无法从"HTMLObjectElement"读取"contentDocument"属性:阻止了具有空"原点的框架访问跨域框架.

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a cross-origin frame.

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

推荐答案

如果您直接访问文件(如

If you're accessing files directly (as you confirm in your comment), Chrome's security model requires that all files be in the same directory.

Firefox的文件访问安全模型稍有不同，它允许访问子资源(如果它们在子目录以及当前目录中).

Firefox has a slightly different security model for file access, it allows sub-resources to be accessed if they are in a sub-directory as well as the current directory.

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

If you access files via a web server you can use any directory that the web-server allows in any browser.

这篇关于为什么我不能在Chrome中使用contentDocument来访问SVG文件，但是在Firefox中却可以呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！