window.opener = null 在浏览器移动设备上（例如：google chrome 应用程序）

Question

我正在弹出身份验证（instagram 和 twitter），流程是：

1. 在页面

   /home

   用户单击 Instagram 身份验证按钮
2. onClick -->

   window.open(INSTAGRAM_AUTH_URL, '_blank', null)

3. 弹出窗口将验证 Instagram 然后重定向到页面

   /social-auth

4. 在

   /social-auth

   我做了：

    if (window.opener) {
      window.opener.postMessage(data)
      window.close()
    }
   

5. 在页面

   /home

   我有监听器

   window.addEventListener('message', .....)

   来接收来自

   postMessage

   的

   /social-auth
数据

问题是，在第 4 步中，移动浏览器上的

window.opener = null

（我在 Chrome 应用程序上尝试过）。

---

我有什么遗漏的吗？ 仅供参考，它在桌面浏览器上运行良好，我正在使用 React.js 作为框架

Answer 1

对于那些正在寻找答案的人，我最近遇到了同样的问题。

出于安全原因，

window.opener

在某些移动浏览器上为

null

。

我使用了BroadcastChannel，它在我的情况下的每个设备上都能完美运行。

// In parent window:
const channel = new BroadcastChannel('yourCustomChannel');
channel.onmessage = (event) => {
    if (event.data.startsWith(window.location.origin)) {
        window.location.href = event.data;
    }
    channel.close();
};

// In popup window:
const channel = new BroadcastChannel('yourCustomChannel');
channel.postMessage('https://you-redirect-url');

希望有帮助:)