问题描述
我使用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>
推荐答案
如果您直接访问文件(如)，Chrome的安全模型要求所有文件都在同一目录中.
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中却可以呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！