尝试从父页面调用 iFrame 中的函数时，为什么会出现 TypeError？

Question

我有一个嵌入了 iFrame（子）的页面（父），iFrame 包含我需要从父调用的 javascript 函数。该页面位于不同的域上，但我不知道这是否是问题所在。这是我在父页面上的代码：

<script type="text/javascript">
    function SaveChanges() {
        var iFrame = document.getElementById("iframeSite");
        iFrame.contentWindow.ExecuteSave();
    }
</script>

...以及我在子页面上的代码：

<script type="text/javascript">
    function ExecuteSave() {
        alert("test1");
    }
</script>

当我在父级中调用“SaveChanges”时，它会在尝试调用“ExecuteSave”的行出错。

Uncaught TypeError: Property 'ExecuteSave' of object [object DOMWindow] 
is not a function

我已经尝试了几乎所有调用子 iFrame 函数的变体，但仍然收到相同的错误。

Answer 1

由于 iframe 位于不同的域中，您将无法在它们之间直接调用。这将违反Same Origin Policy。

有一种认可的方式让 iframe 和父级进行通信。它叫做postMessage()。

希望这会有所帮助！