如何在 Facebook 應用內瀏覽器中接收 postmessage？

Question

我試圖從打開的窗口向 facebook 應用程序瀏覽器中的 opener 發送 postmessage，但“opener 窗口”從不接收消息。 問題的原因是什么？

接收端：

window.addEventListener('message', function (e) {
    window.console.log("on message: " + e.data); 
}, false)

發送方：

window.opener.postMessage('any Message', document.location.origin);

Answer 1

如果沒有看到更多代碼，很難判斷，但是作為這個Opening facebook connect window via javascript？ 回答指出，如果您嘗試訪問 oAuth 頁面，則不可能。

向我們展示您在哪里獲得變量 window.opener，這可能會添加一些上下文。

如果您從 window.open(/ page /) 打開它，它似乎被明確阻止： How do I get around window.opener cross-domain security正如該問題所述：

筆記

社交注冊不適用於 iframe 中的 google、FB 等。 我相信他們出於安全原因不允許他們。

同樣來自window.opener 重定向后為空

每當您導航到不同的主機時（出於安全原因），window.opener 都會被刪除，沒有辦法繞過它。 如果可能，唯一的選擇應該是在框架中進行付款。 頂層文檔需要留在同一個主機上。

但是正如引用的第二個答案中所述，不要在打開的頁面上使用 window.opener，而是從原始頁面執行所有操作，並且（如果您可以訪問彈出窗口的源），請在另一個頁面上發送消息，例如在那里接受的答案中提到，正確的做法只是反過來：

反過來做。 從主（打開器）窗口跟蹤子彈出窗口的狀態，您可以輕松知道子窗口何時導航回您的域，以便您可以再次與它“對話”。 但不要自行關閉子窗口。 讓 opener 窗口從子窗口獲取結果然后關閉它。

參考： https : //developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Example

例如，在您的起始頁面中，執行以下操作：

var popup = window.open(/*some URL*/);
popup.postMessage("hi");
addEventListener("message", function(e) {
    console.log(e);
    e.source.postMessage("Hi there"); //official workaround for window.opener on other page
})

然后在您的“/ some URL /”源代碼頁面中，執行以下操作：

addEventListener("message", function(e) {
    console.log(e);
    e.source.postMessage("hi back");
});

並嘗試使用該策略，但似乎 window.opener 不在畫面中。 試試console.logging它，它只是說空。