多组件实例下Invisible ReCaptcha的execute回调未触发问题

核心问题1：显式渲染时回调参数传值错误 #

你在显式渲染reCAPTCHA时，callback参数传入的是从data-callback获取的字符串（比如"CaptchaExecSubmit"），但Google reCAPTCHA的grecaptcha.render()方法要求callback必须是函数引用，而非函数名字符串。这直接导致验证完成后无法触发回调函数。

修复代码： #

修改CaptchaCallback中的属性配置：

window.CaptchaCallback = function(){
    $('.g-recaptcha').each(function(index, el) {
        var recaptcha_widget_callback_name = $(el).data('callback');
        // 将字符串转为全局函数引用
        var recaptcha_widget_callback = window[recaptcha_widget_callback_name];
        var attributes = {
            'sitekey'  : $(el).data('sitekey'),
            'size'     : $(el).data('size'),
            'callback' : recaptcha_widget_callback,
            // 补充HTML中定义的其他配置，保证参数完整
            'theme'    : $(el).data('theme'),
            'badge'    : $(el).data('badge')
        };
        var recaptcha_widget_id = grecaptcha.render(el, attributes);
        $(el).data('recaptcha-widget-id', recaptcha_widget_id);
        console.log('setting ID for recaptcha sequence: '+recaptcha_widget_id+' with call back '+recaptcha_widget_callback_name);
    });
}

核心问题2：同步读取验证响应的错误逻辑 #

在表单submit事件中，调用grecaptcha.execute()后立刻读取.g-recaptcha-response的值是错误的——execute()触发的人机验证是异步流程，此时验证还未完成，值必然为空。这部分代码完全多余，直接删除即可。

修复代码： #

修改表单submit绑定逻辑：

$(document).ready(function(){
    $('.emailform').each(function(){
        var thisform = $(this);
        var thisform_id = $(this).attr('id');
        console.log('Activating emailform '+thisform_id);

        $(this).submit(function(e){
            var captcha = $(this).find('.g-recaptcha');
            e.preventDefault();
            if (captcha.length > 0 && captcha.data('size') === 'invisible') {
                window.activeForm = thisform[0]; // 存储DOM元素而非jQuery对象，避免潜在上下文问题
                console.log("Setting active form to "+thisform_id);
                var captcha_widget_id = captcha.data('recaptcha-widget-id');
                grecaptcha.execute(captcha_widget_id);
                return false;
            } else {
                return activate_ajaxemailform(thisform);
            }
        });
    });
});

额外排查点 #

1. 用户交互触发要求：Google reCAPTCHA的invisible模式要求execute()必须由真实用户交互触发（比如点击按钮、手动提交表单），禁止代码自动调用。
2. 全局函数冲突：检查是否有其他JS代码覆盖了window.CaptchaExecSubmit函数，导致回调无法执行。
3. 控制台错误：打开浏览器开发者工具Console面板，查看是否有未捕获的JS错误（比如引用错误、类型错误），这类错误会中断reCAPTCHA的执行流程。
4. API加载顺序：确认api.js在common.js之后加载，且defer async配置不会导致CaptchaCallback在common.js之前执行（目前你的配置是正确的，但可以排查是否有CaptchaCallback is not defined的报错）。

验证修复效果 #

1. 刷新页面后，在控制台执行grecaptcha.execute(0)，应触发人机验证（可能弹出验证框或后台静默验证），验证完成后CaptchaExecSubmit会被调用，控制台打印相关日志，同时.g-recaptcha-response会生成有效值。
2. 手动提交表单时，验证流程正常触发，回调函数能拿到captcha_response并完成表单提交。

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