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

Gof*_*ord 12 javascript html5 recaptcha

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

然而,问题在于它并没有真正出现,onload甚至没有被调用.
当我尝试自动渲染它时,它确实有效.

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

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
Run Code Online (Sandbox Code Playgroud)

在HTML表单中:

<div id="recaptcha"></div>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

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

Aar*_*ron 17

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

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

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

  • 首先使用回调对脚本进行排序,然后再使用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>
Run Code Online (Sandbox Code Playgroud)


Raa*_*aad 10

我刚刚复制了你的代码,使用了我自己的Site Key,它确实有效.

我使用的代码是:

<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>
Run Code Online (Sandbox Code Playgroud)

仔细检查您的代码,因为只有一个字符错误可以阻止工作.