web-dev-qa-db-ja.com

キャッチされないReferenceError：grecaptchaが定義されていません

recaptcha v2を使用しています

次のエラーが時々発生します（エラーが発生しない場合がありますが、エラーが発生する場合もあります）

Uncaught ReferenceError: grecaptcha is not defined

内部httpリクエストが原因のようです。別のjs recaptcha__en.js。一方、grecaptchaの実際のレンダリングコードが実行されます。

それでは、この問題を回避するための標準的なソリューションは何ですか？

PS：もちろんsetTimeout以外の解決策を探しています

javascriptrecaptcha
21
codeofnode

Recaptchaには、onloadコールバックがあり、recaptchaがロードされると実行されます。そのコールバック関数内にコードを配置します。

https://developers.google.com/recaptcha/docs/display

<script>
    function onloadCallback() {
        /* Place your recaptcha rendering code here */
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
21
Vigneswaran Marimuthu

以下の方法でスクリプトを注文することでこれを解決しました

HTML

<div id="review_recaptcha"></div>

jQuery

<script type="text/javascript">
      var review_recaptcha_widget;
      var onloadCallback = function() {
        if($('#review_recaptcha').length) {
            review_recaptcha_widget = grecaptcha.render('review_recaptcha', {
              'sitekey' : '<?php echo $site_key?>'
            });
        }
      };      
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
4
diEcho

時々、アプリケーションはスクリプト'https://www.google.com/recaptcha/api.js更新後、アプリケーションに複数の<script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script>

1
Gabriel Jaime Sierra Rua

私の問題は、スクリプトコード（：

つまり、内部パスから

<script src='static/js/recaptcha/api.js'></script>

外部のGoogleパスへ

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

1
Walk

言語に関心がある場合は、APIを呼び出すときにhl=en変数を設定できます！

など：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en"></script>
0
mahatmanich

ランディングページで動作し、bootstrap 4ポップアップフォームでも動作します。

<script src="https://www.google.com/recaptcha/api.js?render=ADD-YOUR-RECAPTCHA-SITE-KEY-HERE"></script>
<script>
var interval = setInterval(function(){
  if(window.grecaptcha){
        grecaptcha.ready(function() {
            grecaptcha.execute('ADD-YOUR-RECAPTCHA-SITE-KEY-HERE', {action: 'homepage'}).then(function(token) {
              $('#i-recaptcha').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
            });
        });
    clearInterval(interval);
  }
}, 100);
</script>

この質問をしてくれてありがとう。 :)

0
Kamlesh