Как мы можем использовать несколько Google Recaptchas на одной странице? - PullRequest
0 голосов
/ 24 ноября 2018

Когда я ставлю

<script>
  var renderCaptchas = function() {
    grecaptcha.render(this, {
      'sitekey' : {{ google_recaptcha_site_key }}
    });
  };

  var onloadCaptchaCallback = function () {
    Array.prototype.forEach.call(document.querySelectorAll('.g-recaptcha'),
     renderCaptchas);
  };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit" async defer></script>

У меня появляется эта ошибка:

reCAPTCHA не может найти предоставленную пользователем функцию: onloadCaptchaCallback

Theфункция еще хорошо определена ... Если я удаляю

grecaptcha.render(this, {
  'sitekey' : {{ google_recaptcha_site_key }}
});

Затем он находит обратный вызов ... Я использую Google ReCaptcha v2, с флажком "mode".

1 Ответ

0 голосов
/ 24 ноября 2018

В вашем цикле есть что-то странное для меня и grecaptcha.render (this!? This = renderCaptchas ... no!? Таким образом, элемент, который вы хотите визуализировать, не годится, поскольку он не является допустимым html-контейнером.

<script>
var renderCaptchas = function(element) {
    grecaptcha.render(element, {
      'sitekey' : 'google_recaptcha_site_key'
    });
  };
</script>

или что-то вроде:

<script>
    var onloadCaptchaCallback = function () {
        [].forEach.call(document.querySelectorAll('.g-recaptcha'), function(element){
            grecaptcha.render(element, {
                'sitekey' : 'google_recaptcha_site_key'
            });
         }
     });
};
</script>

Как перебрать document.querySelectorAll:

Как перебрать выбранные элементы с document.querySelectorAll

...