javascript - google - Error de referencia no detectado: grecaptcha no está definido

recaptcha v3 example

Question

Estoy usando recaptcha v2

Recibo el siguiente error de vez en cuando (a veces no recibo el error y otras veces lo hago)

Uncaught ReferenceError: grecaptcha is not defined

Parece que debido a la solicitud interna de http. eso toma algún tiempo para obtener otro js recaptcha__en.js . Mientras tanto el código de renderización real de grecaptcha ejecuta.

Entonces, ¿cuál es la solución estándar para evitar este problema?

PD: por supuesto que estoy buscando otra solución que no sea setTimeout

Answer 1

¡Puede configurar la variable hl=en al llamar a la API si el idioma le preocupa!

como tal:

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

Answer 2

A veces, la aplicación carga varias veces el script ''https://www.google.com/recaptcha/api.js después de la actualización, asegúrese de que su aplicación no tenga múltiples <script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script>

Answer 3

Mi problema se resolvió haciendo los siguientes cambios en el código del script (:

es decir, desde el camino interno

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

a la ruta de Google externa es decir

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

Answer 4

Recaptcha tiene una devolución de llamada onload que se ejecutará una vez que se cargue recaptcha. Coloque su código dentro de esa función de devolución de llamada.

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>

Answer 5

Resolví esto ordenando el script de la siguiente manera

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>