PayPal登录按钮：登录后关闭弹窗并刷新/重定向父窗口

问题原因 #

你遇到的window.opener为null的情况确实是跨域安全限制导致的。当PayPal授权完成后，弹窗重定向的页面与你的父页面域名不同时，浏览器的同源策略会阻断对window.opener的访问——这是浏览器的核心安全机制，防止跨域页面恶意篡改父窗口内容。

解决方案 #

方案1：使用PayPal Login SDK原生回调（最优） #

PayPal登录SDK本身支持在父页面监听授权成功/取消事件，无需依赖弹窗内的JS操作，直接在父窗口处理弹窗关闭和刷新逻辑。

示例代码（Login With PayPal场景）：

// 初始化PayPal登录按钮
paypal.use(['login'], function(login) {
  // 手动打开弹窗并保留引用（避免SDK自动打开导致无法控制弹窗）
  const authUrl = '你的PayPal授权地址';
  window.paypalPopup = window.open(authUrl, 'paypalLogin', 'width=600,height=450');

  login.render({
    appid: '你的PayPal客户端ID',
    authend: 'sandbox', // 生产环境改为'production'
    scopes: 'openid profile address', // 请求用户信息的权限范围
    containerid: 'paypal-login-button',
    returnurl: '你的授权回调URL',
    // 授权成功回调
    callback: function(data) {
      window.paypalPopup.close();
      // 刷新父窗口或指定重定向地址
      window.location.reload();
      // 或 window.location.href = '/user-profile';
    },
    // 用户取消登录回调
    cancelcallback: function(data) {
      window.paypalPopup.close();
      // 可选：父窗口做提示或刷新
      window.location.reload();
    }
  });
});

方案2：用postMessage跨域通信（重定向场景） #

如果必须依赖弹窗重定向后的页面，可通过postMessage实现跨域页面间的安全通信，触发父窗口的刷新和弹窗关闭。

1. 父页面添加消息监听：

window.addEventListener('message', function(event) {
  // 严格验证消息来源域名，防止恶意攻击
  if (event.origin === 'https://你的回调页面域名') {
    const msgData = event.data;
    if (msgData.type === 'paypalLoginCompleted' || msgData.type === 'paypalLoginCancelled') {
      // 关闭弹窗
      if (window.paypalPopup) {
        window.paypalPopup.close();
      }
      // 刷新或重定向父窗口
      if (msgData.redirectUrl) {
        window.location.href = msgData.redirectUrl;
      } else {
        window.location.reload();
      }
    }
  }
});

2. 弹窗重定向页面发送消息：

// 向父窗口发送事件消息
if (window.opener) {
  window.opener.postMessage({
    type: 'paypalLoginCompleted', // 取消登录时改为'paypalLoginCancelled'
    redirectUrl: '/user-profile' // 可选，父窗口重定向目标地址
  }, 'https://你的父页面域名'); // 必须指定父页面域名，禁止使用'*'
}
// 关闭当前弹窗
window.close();

注意事项 #

• 若使用PayPal自动生成的弹窗，需改为手动调用window.open打开授权页面，确保能获取弹窗引用。
• 使用postMessage时必须验证消息来源域名，避免安全漏洞。

内容的提问来源于stack exchange，提问作者Daniel H