Question

从我理解的文档中，为了改变recaptcha的语言，我必须明确地呈现它。

然而，问题是它并没有真正出现，甚至没有调用onload。
当我尝试自动渲染它时它确实有效。

这是代码：
在HTML头中:(我也尝试将其放在body标签的末尾）

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

在HTML表单中：

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

使用Javascript：

var recaptchaCallback = function() {
  console.log('recaptcha is ready'); // not showing
  grecaptcha.render("recaptcha", {
    sitekey: 'My Site Key',
    callback: function() {
      console.log('recaptcha callback');
    }
  });
}

Answer 1

确保在recaptcha脚本之前定义了onload方法。否则，您将遇到竞争条件，其中recaptcha脚本可能会在定义之前尝试调用您的方法（特别是如果缓存了重新访问脚本）。

来自onload https://developers.google.com/recaptcha/docs/display

的文档

注意：必须在之前定义onload回调函数   reCAPTCHA API加载。确保没有竞争条件：


首先使用回调对脚本进行排序，然后再使用reCAPTCHA

使用脚本标记中的async和defer参数

例如：

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


<script type="text/javascript">
  var recaptchaCallback = function () {
    console.log('recaptcha is ready'); // not showing
    grecaptcha.render("recaptcha", {
        sitekey: 'SITE_KEY',
        callback: function () {
            console.log('recaptcha callback');
        }
    });
  }
</script>

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

Answer 2

我刚刚复制了你的代码，使用了我自己的网站密钥，但它确实有效。

我使用的代码是：

<html>
  <body>
    <p>ReCaptcha Test</p>

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

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

    <script type="text/javascript">
      var recaptchaCallback = function () {
        console.log('recaptcha is ready'); // showing
        grecaptcha.render("recaptcha", {
            sitekey: 'SITE_KEY',
            callback: function () {
                console.log('recaptcha callback');
            }
        });
      }
    </script>

  </body>
</html>

请仔细检查您的代码，因为只有一个字符错误可能会阻止工作。

Answer 3

HTML

<div id="captcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReadycallback&render=explicit' async defer'></script>

的Javascript

       //render captcha and set call back function on api.js load finish
       function recaptchaReadycallback(){
        grecaptcha.render('captcha', {
           'callback' : recaptchaCheckedCallback,
           'expired-callback': recaptchaExpiredCallback,
           'sitekey': 'YOUR-SITE-KEY'

         });
       }

       //on expiry do stuff. i.e. show error 
       function recaptchaExpiredCallback(){
          grecaptcha.reset();
          //show 'check the bloody box' error
       };

       //on not a robot confirmation do stuff. i.e. hide error
       function recaptchaCheckedCallback(){
          //hide 'check the bloody box' error
       }

Answer 4

我的问题是我没有意识到仅在提交表单后才触发第二个回调-而第一个回调是在页面加载时执行的。

显式渲染ReCaptcha - Onload函数未触发

4 个答案: