web-dev-qa-db-ja.com

明示的にReCaptchaをレンダリングする-Onload関数が起動しない

ドキュメントから、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');
    }
  });
}
javascripthtmlrecaptcha
12
Gofilord

私はあなたのコードをコピーし、自分のサイトキーを使用しました。

私が使用したコードは次のとおりです。

<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>

1文字のタイプミスだけでは機能しない場合があるため、コードを注意深く確認してください。

10
Raad

Onloadメソッドがrecaptchaスクリプトの前に定義されていることを確認してください。そうしないと、recaptchaスクリプトが定義前にメソッドを呼び出そうとする可能性があるという競合状態になります（特に、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>
17
Aaron

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
       }
0
Kareem

私の問題は、2番目のコールバックがフォームの送信時にのみ発生することを認識していなかったことです。一方、最初のコールバックはページのロード時に実行されます。

0
Nacht - Reinstate Monica