如何在 Facebook 应用内浏览器中接收 postmessage？

Question

我正在尝试将 postmessage 从打开的窗口发送到 facebook 应用程序浏览器中的 opener，但“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 as所述问题中提到的：

笔记

社交注册不适用于 iframe 内的 Google、FB 等。我相信他们出于安全原因不允许这样做。

同样来自window.opener 重定向后为 null

每当您导航到不同的主机（出于安全原因）时，window.opener 都会被删除，没有办法解决它。如果可能的话，唯一的选择应该是在框架内进行付款。顶级文档需要保留在同一主机上。

但正如引用的第二个答案中提到的，不要在打开的页面上使用 window.opener，而是从原始页面执行所有操作，并且（如果您有权访问弹出窗口的源），在另一个页面上创建 onmessage，例如在接受的答案中提到，正确的方法只是相反：

反过来做。从主（打开器）窗口跟踪子弹出窗口的状态，您可以轻松知道子窗口何时导航回您的域，以便您可以再次与它“交谈”。但不要自行关闭子窗口。让打开器窗口从子窗口获取结果然后关闭它。

参考：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它，它只是说null。