如何通过javascript在两个不同的域之间进行通信

Question

我正在用javascript、ajax和signaler构建一个嵌入式聊天控件。用户可以通过添加一些javascript将其添加到他们的网站中，这些javascript会回调到我们的服务器并请求构建聊天小部件所需的javascript。聊天小部件随后嵌入到他们的网站上，但它可以弹出到一个新窗口中。新窗口来自我们的服务器，不再在他们的网站上。

任务：当用户关闭弹出窗口时，我需要重新显示嵌入的弹出窗口，并恢复正常聊天。

问题：弹出式聊天与嵌入式聊天（他们的网站）在不同的域（我们的网站）上。

我尝试过的：

1） 为打开弹出窗口的窗口提供重置功能。弹出窗口调用window.oopener.reset（）的OnUnload（卸载）<---由于跨域安全问题，window.opener被拒绝访问。

2） 当弹出窗口时，启动一个循环来检查本地存储。弹出窗口的onUnload在浏览器本地存储中设置一个变量<----本地存储似乎也没有经过跨域。即使代码命中，我也看不到更改。

3） 与2）相同，但使用浏览器cookie<---与2）情况相同，它不跨域。

我必须使用的：

• 中央服务器和数据库
• 在他们的网站上运行的Javascript
• 在他们的网站上嵌入聊天，可以弹出在我们的网站上运行但继续相同聊天的聊天窗口会议
• 聊天会话可以在嵌入式聊天中启动窗口小部件或弹出窗口中，并且应该能够来回移动两者之间很容易

Answer 1

最好的解决方案可能是使用postMessage。

你要做的事情如下。让用户在他的页面上插入以下内容：

// open your popup chat
var popup = window.open(yourpopup);
popup.postMessage("init",
                  "https://tagetUrl.com");

function receiveMessage(event)
{
  if (event.origin !== "http://YOURDOMAIN.org")
    return;
  // initialize your chat again
}
window.addEventListener("message", receiveMessage, false);

在弹出窗口中，你必须这样做：

source = null;
origin = null;
function receiveMessage(event)
{
  source = event.source;
  origin = event.origin;
}
window.addEventListener("message", receiveMessage, false);

当弹出窗口关闭（onUnload）时，您可以将消息发送回原始页面：

source.postMessage("closed", origin);

我希望我能帮上忙。