如何通過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);

我希望我能提供幫助。