javascript - 允许子 Iframe 从不同域调用其父窗口上的函数

Question

我制作了一个在 IFrame 中加载的页面，它需要在加载完成后调用父页面上的函数。

它在本地开发中工作(在同一域上)，但在现实世界中它托管在完全不同的域上，所以显然我遇到了跨域问题，即:

不安全的 JavaScript 尝试从 URL http://[...]site2.com/iframe 的框架访问 URL http://[...]site1.com 的框架。域、协议(protocol)和端口必须匹配。

我控制两台服务器，所以我是否可以在一台或两台服务器上放置一些东西，允许它们相互通信？

我研究过在 Iframe 页面和父页面中设置“document.domain”。

我尝试过设置访问控制 header :

header('Access-Control-Allow-Origin: *');

但是这些都不起作用。

当我控制两台服务器时，是否有任何方法允许 Iframe 在完全不同的域上调用父窗口中的函数？

Answer 1

您可以通过 message posting API 在框架之间进行通信.

例如，在您的子框架中您可以调用:

parent.postMessage("child frame", "*");

并在父框架中注册一个消息处理程序:

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});