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

Question

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

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

问题: 弹出聊天位于与嵌入式聊天(他们的网站)不同的域(我们的网站)上。

我尝试过的:

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

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

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

我必须处理的事情:

• 中央服务器和数据库。
• 在他们的网站上运行 JavaScript。
• 其网站上的嵌入式聊天可以弹出 在我们网站上运行但继续相同聊天的聊天窗口 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);

希望能帮到你。