尝试访问对象中的svg时,chrome出错

时间:2015-10-20 15:35:32

标签: javascript html5 google-chrome svgpanzoom

我没有太多的编码经验,我试图让用户对嵌入在元素中的SVG有一些控制权。我找到了ariutta svgpanzoom.js库,但是当我尝试使用它进行小测试时,我在chrome中出现了安全性错误(一切都适用于Firefox和Safari)

这是我的基本代码

  
<!DOCTYPE html>
<html>
<head>
	<title>SVG test</title>
	<meta charset="utf-8">
	<script src="http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
</head>
<body>
	<p><h1>Test SVG in object tag</h1></p>
	<br>
	<object id="mySVG" type="image/svg+xml" data="../Tests/simpleSVG.svg" width="400" height="400" style="border: 1px solid red;"></object>
	
	<script>
      window.onload = function() {
        svgPanZoom("#mySVG", {
          zoomEnabled: true,
          controlIconsEnabled: true
        });
      };
    </script>

</body>
</html>

我在Chrome上遇到的错误是: 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.

有没有人知道我做错了什么?

提前致谢...

1 个答案:

答案 0 :(得分:0)

Bumbu是对的:Chrome会阻止远程脚本(svg-pan-zoom)对本地文档(本例中为Object)的访问。

从本地服务器运行时,代码运行良好。