Google Invisible reCAPTCHA弹窗点击父窗口消失致注册流程锁定求助

我之前处理过类似的场景，确实Google官方没有提供直接监听弹窗关闭的钩子，但我们可以通过DOM监听和状态重置来解决这个问题，给你几个实用的方案：

方案一：用MutationObserver监听弹窗DOM变化 #

Google Invisible reCAPTCHA的验证弹窗会带有grecaptcha-bubble类名，我们可以通过MutationObserver监听这个元素的移除事件，一旦检测到弹窗消失，就重置reCAPTCHA状态并解锁注册流程：

// 初始化MutationObserver监听弹窗消失
const setupRecaptchaCloseListener = () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查被移除的节点中是否包含reCAPTCHA弹窗
      const isBubbleRemoved = Array.from(mutation.removedNodes).some(node => 
        node.classList?.contains('grecaptcha-bubble')
      );

      if (isBubbleRemoved) {
        // 重置reCAPTCHA状态
        if (typeof grecaptcha !== 'undefined') {
          grecaptcha.reset();
        }
        // 解锁你的注册流程，比如启用注册按钮、清除锁定状态
        document.getElementById('register-form').classList.remove('locked');
        document.getElementById('submit-btn').disabled = false;
      }
    });
  });

  // 监听body下所有子节点的变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
};

// 在页面加载完成后初始化监听
document.addEventListener('DOMContentLoaded', setupRecaptchaCloseListener);

方案二：跟踪验证状态+超时检测 #

当触发reCAPTCHA验证时，记录当前处于“验证中”状态，设置一个超时定时器，如果在指定时间内没有收到验证成功的回调，就认为弹窗被用户关闭了，然后执行解锁逻辑：

let recaptchaVerifying = false;
let verificationTimeout;

// 触发reCAPTCHA验证的函数
const triggerRecaptcha = () => {
  recaptchaVerifying = true;
  // 锁定注册流程
  document.getElementById('submit-btn').disabled = true;
  
  // 设置5分钟超时（可根据需求调整）
  verificationTimeout = setTimeout(() => {
    if (recaptchaVerifying) {
      // 超时未完成，重置状态并解锁
      grecaptcha.reset();
      recaptchaVerifying = false;
      document.getElementById('submit-btn').disabled = false;
    }
  }, 5 * 60 * 1000);

  // 执行reCAPTCHA验证
  grecaptcha.execute('YOUR_SITE_KEY', { action: 'register' }).then(token => {
    // 验证成功，清除超时定时器
    clearTimeout(verificationTimeout);
    recaptchaVerifying = false;
    // 继续注册流程
    submitRegisterForm(token);
  });
};

// 别忘了在验证成功回调中清除超时

方案三：添加父窗口遮罩层（预防式方案） #

在reCAPTCHA弹窗显示时，给父页面添加一个全屏遮罩层，阻止用户点击到弹窗外的区域，从根源上避免弹窗被意外关闭：

.recaptcha-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  background: rgba(0,0,0,0.5);
}

// 监听弹窗的显示（通过DOM变化）
const setupOverlay = () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查是否添加了reCAPTCHA弹窗
      const isBubbleAdded = Array.from(mutation.addedNodes).some(node => 
        node.classList?.contains('grecaptcha-bubble')
      );

      if (isBubbleAdded) {
        // 添加遮罩层
        const overlay = document.createElement('div');
        overlay.className = 'recaptcha-overlay';
        document.body.appendChild(overlay);
      } else {
        // 移除遮罩层
        const overlay = document.querySelector('.recaptcha-overlay');
        if (overlay) overlay.remove();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
};

document.addEventListener('DOMContentLoaded', setupOverlay);

这些方案都不需要依赖额外的第三方库，完全基于原生JS和reCAPTCHA的现有API实现，你可以根据自己的业务场景选择最合适的一种。

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