Uncaught ReferenceError: grecaptcha не определен

Я использую recaptcha v2

Иногда я получаю следующую ошибку (иногда я не получаю ошибку, а иногда получаю ее)

Uncaught ReferenceError: grecaptcha is not defined

Кажется, из-за внутреннего HTTP-запроса. для получения другого js recaptcha__en.js требуется некоторое время. Между тем выполняется фактический код рендеринга grecaptcha.

Итак, каково стандартное решение, чтобы избежать этой проблемы.?

PS: конечно, я ищу какое-то решение, кроме setTimeout

Ответ 1

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>

Ответ 2

Я решил это, заказав script ниже

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>

Ответ 3

Моя проблема решена, выполнив следующие изменения в коде script (:

i.e из внутреннего пути

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

на внешний путь google i.e

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

Ответ 4

Иногда приложение несколько раз загружает скрипт 'https://www.google.com/recaptcha/api.js после обновления. Убедитесь, что в вашем приложении не установлено несколько <script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script>

Ответ 5

Вы можете установить переменную hl=en при вызове api, если язык вас беспокоит!

как таковой:

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

Ответ 6

Он работает на целевой странице, а также во всплывающей форме начальной загрузки 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>

Спасибо, что задали этот вопрос. :)