javascript - 如何将变量从嵌入式 SVG 发送到 HTML 文档？

Question

我使用这段代码将 SVG 嵌入到 HTML 文档中

<embed src="circle.svg" type="image/svg+xml" />

在 SVG 文件中，我得到了这样一个脚本 block

<svg onload="myFunction()">
<script  type="text/javascript">
<![CDATA[
    function myFunction() {
        var sum;
        sum = 5 + 3;
    }
]]>
</script>
</svg>

如何从 HTML 文档中的 SVG 中获取变量“sum”？ (注意:SVG 中的脚本比简单的求和要复杂得多，但我不想用代码重载这个问题)

Answer 1

答案是，您的操作就好像 是一个 <iframe> 而其中的文档是一个 HTML 文档。

您可以传递数据，例如通过 postMessage ，或者通过在相应的窗口对象上使用全局变量或函数。

在 svg 中:

function foo() {
  var parentWindow = window.parent;
  parentWindow.someGlobalVar = 47;
}

然后就可以读取html主文档中的someGlobalVar变量了。您还可以调用函数，如 this example .