如何为不同ID的模态框正确显示reCAPTCHA？

问题核心：页面中DOM元素ID必须唯一，重复的captchaID会导致reCAPTCHA脚本仅绑定第一个匹配容器，后续模态框无法触发渲染。

以下是具体修改方案：

1. PHP循环生成唯一ID的容器与模态框 #

利用循环索引给每个模态框和对应的reCAPTCHA容器分配唯一标识，同时通过按钮的data-*属性存储关联ID，方便后续JS调用。

示例PHP代码：

<?php
// 示例循环，可根据实际业务调整循环逻辑
$modalCount = 3;
for ($i = 0; $i < $modalCount; $i++) :
?>
<!-- 模态框触发按钮 -->
<button class="modal-trigger" data-modal="modal-<?= $i ?>" data-captcha="captcha-<?= $i ?>">
  打开弹窗 <?= $i + 1 ?>
</button>

<!-- 模态框容器 -->
<div id="modal-<?= $i ?>" class="modal">
  <div class="modal-inner">
    <!-- 唯一ID的reCAPTCHA容器 -->
    <div id="captcha-<?= $i ?>" class="captcha-container"></div>
    <button class="modal-close">关闭</button>
  </div>
</div>
<?php endfor; ?>

2. 按需渲染与管理reCAPTCHA实例 #

通过显式渲染模式（render=explicit），在模态框打开时才渲染对应容器的reCAPTCHA，同时用对象存储已创建的实例，避免重复渲染报错。

首先确保页面已引入reCAPTCHA脚本（开启显式渲染）：

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

然后添加JS逻辑：

// 存储已创建的reCAPTCHA实例
const captchaInstances = {};
const siteKey = '你的站点密钥'; // 替换为实际的reCAPTCHA站点密钥

// 绑定模态框打开事件
document.querySelectorAll('.modal-trigger').forEach(btn => {
  btn.addEventListener('click', function() {
    const modalId = this.dataset.modal;
    const captchaId = this.dataset.captcha;
    const modal = document.getElementById(modalId);

    // 显示模态框
    modal.style.display = 'block';

    // 未创建实例则渲染
    if (!captchaInstances[captchaId]) {
      captchaInstances[captchaId] = grecaptcha.render(captchaId, {
        sitekey: siteKey,
        callback: (response) => {
          // 处理验证成功后的逻辑，比如提交表单
          console.log(`弹窗${captchaId.split('-')[1]}验证成功`, response);
        }
      });
    } else {
      // 已存在实例，重置状态（可选）
      grecaptcha.reset(captchaInstances[captchaId]);
    }
  });
});

// 绑定模态框关闭事件
document.querySelectorAll('.modal-close').forEach(btn => {
  btn.addEventListener('click', function() {
    const modal = this.closest('.modal');
    modal.style.display = 'none';
  });
});

// 点击模态框外部关闭
window.addEventListener('click', (e) => {
  if (e.target.classList.contains('modal')) {
    e.target.style.display = 'none';
  }
});

关键说明 #

• 必须使用render=explicit模式，禁止自动渲染（默认的自动渲染会在页面加载时寻找第一个g-recaptcha类或指定ID的元素，无法处理动态生成的容器）。
• 通过captchaInstances对象管理实例，避免重复调用grecaptcha.render导致的DOM重复绑定问题。
• 关闭模态框时可选择重置reCAPTCHA状态，提升用户体验。

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