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

Question

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

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

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

我尝试过的：

1）给窗口打开弹出一个重置功能。 弹出窗口的OnUnload调用window.opener.reset（）<--- window.opener因跨域安全问题而被拒绝访问。

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

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);

在你的PopUp中你必须做这样的事情：

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

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

source.postMessage("closed", origin);

我希望我能提供帮助。