javascript - 如何使用不同的协议(protocol)(HTTP 与 HTTPS)在弹出窗口中监听事件？

Question

我希望能够从任何非安全页面安全地验证我网站上的用户。所以我制作了一个 window.open() 弹出窗口来打开一个安全的登录表单。计划是在用户注册或验证后，弹出窗口将关闭，父窗口将刷新。

关闭弹出窗口工作正常，但是，由于跨站点脚本规则，当尝试刷新父窗口时，我得到以下信息:

Unsafe JavaScript attempt to access frame with URL http://localhost/ from frame with URL https://localhost/signin_popup. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

我不能简单地在父级上订阅 onunload，因为身份验证弹出窗口可能会在准备好刷新父级之前遍历多个页面。我目前正在尝试查看是否可以将自定义事件绑定(bind)到父级的弹出窗口对象，并从弹出窗口中触发它们，但无济于事。

所以...

当协议(protocol)不匹配时，如何让弹出窗口与父窗口交互，或者让父窗口订阅弹出窗口的自定义事件？

Answer 1

您应该能够使用 postMessage-API 实现跨域窗口通信。

向其他窗口发布消息:

otherWindowRef.postMessage( 'message', origin );

然后您将在另一个窗口收到它:

window.addEventListener( "message", function() {
   //message was received 
}, false );

其他窗口同样会.postMessage回到主窗口，主窗口得到一个消息事件。