访问 svg 的脚本答案

【问题标题】：Access to svg's scripts访问 svg 的脚本
【发布时间】：2010-09-19 20:12:27
【问题描述】：

svg 是一个基于 xml 的图形，您可以在其中添加 JavaScript。我试图访问 svg 中定义的脚本函数。我的 svg 中的脚本是这样的：

<svg ... onload="RunScript(evt);"...>
<script type="text/javascript">
...
function RunScript(loadEvent) {
  // Get object in my html by id
  var objElement = top.document.getElementById('objid1');
  if (objElement)
  {
    // Extend object tag object's methods
    objElement.SVGsetDimension  = setDimension;
    ...
  }
  function setDimention(w, h) {...}

在我的主 html 文件中，svg 嵌入到一个对象标签中，如下所示：

<object id="objid1" data="mygrahic.svg" ... >
<a href="#" onclick="document.getElementById('objid1').SVGsetDimention(10, 10);
   return false;"
...>Set new dimention</a>...

这个很好用。但是，如果 svg xml 文件被完整的 URL（在另一个站点上）引用，如下所示：

<object id="objid1" data="http://www.artlibrary.net/myaccount/mygrahic.svg" ... >

代码不再起作用。看起来我无法将我的 svg 脚本中定义的方法附加到我的主 html 对象标记元素中的方法，或者在这种情况下顶部或文档不可用，或者 getElementById(..) 只是找不到我的对象元素我的 svg 脚本。有什么办法可以在 svg xml 脚本中找到我的 html 元素？

不确定这个问题是否是由不同的 DOM 引起的，我的 svg 脚本代码无法找出另一个 DOM 的对象或元素。如果有解决办法就好了。

【问题讨论】：

您针对和测试的浏览器是什么？如果这些浏览器没有内置 SVG 支持，您使用的是谁的 SVG 插件？
我现在使用的 Firefox。它确实很好地显示了 svg 图形。这只是脚本问题。我认为 pdc 的答案可能是原因。

标签： javascript html svg

【解决方案1】：

我认为线索可能在“在另一个网站上”。关于何时允许来自不同站点的 JavaScript 程序与教其他程序通信有严格的规定。嵌入式 SVG 的处理方式与 iframe 中的文档相同。

【讨论】：

【解决方案2】：

所以，从浏览器的角度来看，您所做的是等同于以下内容：

<script>
function stealPassword() {
  var passwordInput = document.querySelector('input[type="password"]');
  var value = passwordInput.value; // My password!
  sendPasswordToServerToStealMyMoney(value);
}
</script>
<iframe src=mybank.com onload=stealPassword()></iframe>

我想你会明白为什么这是不可取的。（不过，您的错误控制台中可能应该有警告或异常。）

【讨论】：

【解决方案3】：

pdc 有这个权利。浏览器努力防止跨站点脚本攻击（XSS），结果就是这样。您不能在从另一个域加载的文档中执行脚本，也不能使用另一个端口或协议。更多信息您可以查看：http://en.wikipedia.org/wiki/Same_origin_policy

【讨论】：

【解决方案4】：

根据我的经验；您的代码是正确的，因此可以准确运行。我的电脑 Windows 7，IE9，安装了 Adobe Viewer。两者都除非 SVG Viewer，IE9 SVG 绘制，但不能运行 SVG TAG 动画，只能运行 Javascript 动画。所以，在Windows XP，IE8下，安装了Adobe SVG Viewer，结果一样（运行准确）。

Firefox SVG 不能完全在我的 PC 下运行（SVG ecmascript 动画）。

【讨论】：