reCaptcha onload回调函数未触发问题排查求助

以下是几个常见的排查方向和解决方案：

1. 确保回调函数处于全局作用域 #

reCaptcha的onload回调要求函数必须是全局可访问的。如果你的回调函数被包裹在局部作用域（比如IIFE、DOM加载事件回调里），reCaptcha加载完成后找不到这个函数，自然不会触发。

修改代码，将回调挂载到window对象：

window.recaptchaCallback = function () {
  console.log('recaptcha is ready');
  grecaptcha.ready(function() {
      grecaptcha.execute('SITE_KEY', {action: 'some_action'}).then(function(token) {
          console.log(token);
      });
  });
}

2. 调整脚本加载顺序 #

你当前的代码中，reCaptcha脚本使用了async defer，它会异步加载并执行，可能在你的回调函数定义脚本之前完成加载。此时recaptchaCallback还未定义，导致无法触发。

把回调函数的定义放在reCaptcha脚本之前：

<script type="text/javascript">
  window.recaptchaCallback = function () {
    console.log('recaptcha is ready');
    grecaptcha.ready(function() {
        grecaptcha.execute('SITE_KEY', {action: 'some_action'}).then(function(token) {
            console.log(token);
        });
    });
  }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=SITE_KEY" async defer></script>

3. 确认reCaptcha版本与render参数匹配 #

• 如果使用的是reCaptcha v2：render参数应该设为explicit，而不是site key。v2的显式渲染才会触发onload回调，之后你需要在回调中调用grecaptcha.render()来渲染验证码组件。
• 如果使用的是reCaptcha v3：确认你的site key是v3类型（在谷歌后台创建时选择v3），并且已将当前域名添加到reCaptcha控制台的“域名”列表中。

4. 清除浏览器缓存 #

浏览器可能缓存了旧的脚本资源，导致新的回调代码未生效。按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重试。

5. 排查脚本冲突 #

检查页面中其他脚本是否覆盖了window.grecaptcha或修改了全局作用域，导致reCaptcha无法正常初始化。可以在控制台手动输入grecaptcha，看是否能正常访问该对象。

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