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

Question

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

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

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

我尝试过的：

1) 给window打开弹窗一个函数来重置。 pop-out window 的 OnUnload 调用 window.opener.reset() <--- window.opener 由于跨域安全问题被拒绝访问。

2) 当弹出window时，开始循环检查本地存储。 onUnload pop-out window 在浏览器localstorage中设置一个变量。 <---- localstorage 好像也没有跨域。即使代码命中，我也看不到变化。

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

我必须处理的事情：

中央服务器和数据库。
Javascript 运行在他们的网站上。
他们网站上的嵌入式聊天可以弹出 chat window 在我们的网站上运行但继续相同的聊天 session。
聊天 session 可以在嵌入式聊天中启动小部件或在弹出窗口中，应该能够来回移动轻松介于两者之间。

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

希望能帮到你

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

How to communicate between two different domains through javascript

javascript

ajax

popup

cross-domain