从Javascript访问SVG对象时接收未捕获的SecurityError [英] Receive Uncaught SecurityError when accessing SVG objects from Javascript

问题描述

今天我花了一点时间试图用D3（和jQuery）来操纵SVG。 我的目标可以通过JavaScript访问/修改本地SVG。

似乎适用于其他人的解决方案不适合我，它有

  window.onload = function（）{
 //按ID获取对象
 var a = document.getElementById（svgObject）; 
 //获取Object标签内的SVG文档
 var svgDoc = a.contentDocument; 
 //通过ID获取一个SVG项目; 
 var svgItem = svgDoc.getElementById（svgItem）; 
 //将颜色设置为其他值
 svgItem.setAttribute（fill，lime）; 
}; 
   
 
 < object id =svgObjectdata =img / svgfile.svgtype =image / svg + xmlheight = width =50>< / object> 
  
和单独的SVG文件
 < svg height =40pxwidth =40pxxmlns =http://www.w3.org/2000/svgviewBox =0 0 800 800> 
< rect id =svgItemwidth =800height =800fill =red>< / rect> 
< circle cx =400cy =400r =400fill =blue>< / circle& 
< / svg> 
  
全部找到此处。这是此版本中的代码的简化版本示例。我的JavaScript代码如下，直接从我的编辑器：
  window.onload = function（）{
 var checkObject = document.getElementById（checkers）; 
 var checkDoc = checkObject.contentDocument; 
 
 var cheese = checkDoc.getElementById（'layer1'）; 
 console.log（cheese）; 
}; 
  
如果它改变了任何东西，我的脚本被加载到HTML的主体的底部。下面是我唯一的HTML元素。
 < object data =check.svgtype =image / svg + xml width =100id =checkers>< / object> 
  
和我的SVG文件（只是一个灰色的检查，可随意使用）。
 < svg id =svg2xmlns：rdf =http://www.w3.org/1999/02/22-rdf- syntax-ns＃xmlns =http://www.w3.org/2000/svgviewBox =0 0 100 100version =1.1xmlns：cc =http://creativecommons.org/ns# xmlns：dc =http://purl.org/dc/elements/1.1/> 
< g id =layer1transform =translate（0，-952.36217）> 
< path id =rawCheckfill =＃dbdbdbd =m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z opacity =0/> 
< / g> 
< / svg> 
  
我的问题来自调用 .contentDocument     只需调用 .contentDocument 对象元素，但我得到这个混乱：
 
 
未捕获的SecurityError：无法读取'contentDocument' HTMLObjectElement'：从
中访问具有原始null的框架时，阻止了具有原始null的框架。协议，域和端口
必须匹配。
 
 
除非是所有的愤怒的红色。这让我感到困惑，因为据我所见，我的代码非常接近一个工作示例的副本，但在这里我是。 
 
 
 
我也尝试过 d3.xml（） .com / questions / 21209549 / embed-and-refer-to-an-external-svg-via-d3-and-or-javascript>此问题的答案并收到以下错误
 
 
 XMLHttpRequest无法加载
文件：///home/user/Documents/examples/d3/check.svg。跨原始
请求仅支持HTTP。
 
 
以及
 
 $ b b  
 
未捕获NetworkError：无法对'XMLHttpRequest'执行'send'：
无法加载'file：/// home / user / Documents / examples / d3 / check。 svg'
 
 
如果您想要查看我的 d3.xml c $ c>尝试我很高兴更新这个问题，我只是认为已经有很多代码块。
解决方案
在Chrome中，当通过文件系统打开页面时（即URL具有 file：// 协议），无法通过JavaScript访问外部SVG的内容， 。
 
 
 
为了解决这个问题，您可以通过本地服务器打开它。或者，您可以停用Same-Origin Policy网络安全功能，以便使用  -  disable-web-security 命令行参数。 Firefox也没有这个限制，所以也有可选的。
 
Today I've been spending a bit of time trying to manipulate SVGs with D3 (and jQuery). My goal is being able to access/modify local SVGs through JavaScript. Doesn't matter if it's tailored to D3 but that would be extra points.

It seems the solution that works for other people isn't working for me, which has the following JavaScript:
window.onload=function() {
    // Get the Object by ID
    var a = document.getElementById("svgObject");
    // Get the SVG document inside the Object tag
    var svgDoc = a.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("svgItem");
    // Set the colour to something else
    svgItem.setAttribute("fill", "lime");
};
with this HTML object
<object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object>
and separate SVG file
<svg height="40px" width="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
    <rect id="svgItem" width="800" height="800" fill="red"></rect>
    <circle cx="400" cy="400" r="400" fill="blue"></circle>
</svg>
all found here. It's a simplified version of the code found in this example. My JavaScript code is shown below, straight up out of my editor:
window.onload = function() {
    var checkObject = document.getElementById("checkers"); 
    var checkDoc = checkObject.contentDocument;

    var cheese = checkDoc.getElementById('layer1');
    console.log(cheese);
};
In case it changes anything, my script is loaded at the bottom of the HTML's body. Below is my only HTML element.
<object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object>
and my SVG file (just a gray check, feel free to use).
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <g id="layer1" transform="translate(0,-952.36217)">
        <path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/>
    </g>
</svg>
My issue comes from calling .contentDocument on checkObject, which should just be calling .contentDocument on the object element but I get this mess:

  
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from
  accessing a frame with origin "null". Protocols, domains, and ports
  must match.
Except it was all angry red color. This confused me, because as far as I can see, my code is pretty close to a copy of the working example, yet here I am. 

I have also tried the d3.xml() seen in this question's answer and received the following error

  
XMLHttpRequest cannot load
  file:///home/user/Documents/examples/d3/check.svg. Cross origin
  requests are only supported for HTTP.
as well as

  
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':
  Failed to load 'file:///home/user/Documents/examples/d3/check.svg'
If you'd like to see more details on my d3.xml() attempt I'm happy to update this question, I just thought there were a lot of code blocks already.
解决方案
In Chrome, it is not possible to access an external SVG's contents via JavaScript when the page is opened through the file system (i.e. the URL has the file:// protocol).

To get around this, you can open it through a local server. Alternately, you can disable the Same-Origin Policy web security feature for testing using --disable-web-security command line argument. Firefox also does not have this limitation, so there is that optional as well.

                        
这篇关于从Javascript访问SVG对象时接收未捕获的SecurityError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！