尝试访问对象中的svg时出现铬错误 [英] Error on chrome when trying to access svg in object

查看:220
本文介绍了尝试访问对象中的svg时出现铬错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我没有太多的编码经验,我试图让用户能够控制嵌入元素的SVG。我找到了ariutta svgpanzoom.js库,但是当我尝试使用它进行一个小测试时,我在chrome中出现安全错误(一切与Firefox和Safari一起运行良好)



这是我的基本代码



<!DOCTYPE html>< html>< head>< html> < title> SVG测试< / title> < meta charset =utf-8> < script src =http://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js>< / script>< / head>< body> < p>< h1>在对象标记< / h1>中测试SVG< / p> <峰; br> < object id =mySVGtype =image / svg + xmldata =../ Tests / simpleSVG.svgwidth =400height =400style =border:1px solid red;> ;< /对象> <脚本> window.onload = function(){svgPanZoom(#mySVG,{zoomEnabled:true,controlIconsEnabled:true}); }; < / script>< / html>

p>我在Chrome上遇到的错误是:
未捕获的SecurityError:未能阅读'contentDocument '来自'HTMLObjectElement'的属性:阻止源null的帧访问源为null的帧。协议,域和端口必须匹配。



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



在此先感谢.. 。bumbu是正确的:Chrome阻止从远程脚本访问本地文档(在这种情况下为对象)(svg-pan)。 -zoom)。



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


I don't have much experience with coding and I'm trying to give a user some control over an SVG embedded in an element. I found the ariutta svgpanzoom.js library, but when I try to make a small test with it, I have a security error in chrome (everything works well with Firefox and Safari)

Here's my basic code

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

The error I get on Chrome is: 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.

Does anyone have an idea of what I did wrong ?

Thanks in advance...

解决方案

Bumbu is right : Chrome blocks the access to local documents (Object in this case) from remote scripts (svg-pan-zoom).

The code works well when run from a local server.

这篇关于尝试访问对象中的svg时出现铬错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆