web-dev-qa-db-de.com

Nicht abgerufener ReferenceError: Grecaptcha ist nicht definiert

Ich verwende recaptcha v2

Ich erhalte gelegentlich folgende Fehlermeldung (manchmal bekomme ich keine Fehlermeldung und manchmal bekomme ich sie)

Uncaught ReferenceError: grecaptcha is not defined

Es scheint wegen der internen http-Anfrage. das dauert einige Zeit, um ein anderes js recaptcha__en.js zu erhalten. Währenddessen wird der aktuelle Rendercode von grecaptcha ausgeführt.

Was ist also die Standardlösung, um dieses Problem zu vermeiden?

PS: Natürlich suche ich nach einer anderen Lösung als setTimeout

javascriptrecaptcha
17
codeofnode

Recaptcha hat einen onload-Callback, der ausgeführt wird, sobald Recaptcha geladen wird. Fügen Sie Ihren Code in diese Rückruffunktion ein.

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>
17
Vigneswaran Marimuthu

Ich habe dieses Problem gelöst, indem ich das Skript auf folgende Weise bestellt habe

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

Manchmal lädt die Anwendung das Skript 'https://www.google.com/recaptcha/api.js Nach dem Aktualisieren mehrmals. Stellen Sie sicher, dass Ihre Anwendung nicht mehrere <script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script> Hat.

1
Gabriel Jaime Sierra Rua

Sie können die Variable hl=en beim Aufruf der API festlegen, wenn die Sprache für Sie von Belang ist!

so wie:

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

Es funktioniert auf der Landing Page und auch in bootstrap 4 Popup Form:

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

Danke, dass Sie diese Frage gestellt haben. :)

0
Kamlesh

Mein Problem wurde durch folgende Änderungen im Skriptcode gelöst (: 

vom internen Pfad 

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

zu einem externen Google-Pfad, d 

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

0
Walk