reCaptcha 复选框旋转 15 秒，然后保持未选中状态

Question

我已将 reCaptcha 放在网站上。 reCaptcha 加载没有问题，但一旦您单击该复选框，它就会旋转 15 秒并保持未选中状态。它也不会与谷歌建立任何后台连接（POST）来评估点击（应该发生）。

我已将其添加到网站的标题中，这是加载的第一个脚本。

<script src='https://www.google.com/recaptcha/api.js'></script>

我还将此字段添加到我的登录表单中：

<div class="g-recaptcha" data-sitekey="6LcGv3MUAAAAALdBp38mExUgAAAAAAH_IX522Gr" style="transform:scale(0.75);transform-origin:100% 0;"></div>

当我单击复选框时，没有网络活动（在开发人员工具的网络选项卡中），我在控制台选项卡中看到的唯一内容是来自 reCaptcha 的 2 个奇怪错误：

我将经过上述修改的裸 html 表单放在同一域和服务器上，并且 reCaptcha 可以正常工作。所以我想这与我现有的大型代码（html 和 javascript）有某种冲突。我怎样才能找到或解决冲突？

Answer 1

我通过切换到显式渲染在我的网站上解决了这个问题：

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

...

<div id="recaptcha"></div>

我使用

recaptchaOnLoad

来重置全局

recaptcha_rendered

变量，因为我的验证码位于 jQuery Steps 向导的第二页上，我认为这就是令人困惑的自动渲染。我可能不需要这个函数（也在上面用于加载 recaptcha API 的

script

标签中引用），但它不会造成任何损害：

function recaptchaOnLoad() {
    recaptcha_rendered = false;
}

当向导切换到包含验证码的页面时，我使用以下命令重置或呈现它：

if( recaptcha_rendered ) {
    grecaptcha.reset();
} else {
    grecaptcha.render( 'recaptcha', {
        'sitekey': 'my-site-key',
        'callback': 'recaptchaOnData',
        'expired-callback': 'recaptchaOnExpiry'
    } );
    recaptcha_rendered = true;
}

现在每次都有效。

Answer 2

我也遇到了同样的问题，无限旋转的装载机。 显然，这是一个 JS 库造成的。 https://mootools.net/

Answer 3

就我而言，这也是由于 mootools 造成的。删除 mootools 不是一个选择。所以，任何解决办法都会有帮助