我们如何在同一页面中使用多个Google Recaptchas?

时间:2018-11-24 10:51:07

标签: recaptcha

当我放

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
  Image
  </div>	
  
  <div class="navigation">
  
    <div class="navigation_button">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    </div>

   <nav class="panel">	
	
    <ul class="menu_box">
      <li class="button_menu"> 1.0 Menu </li>
      <li class="button_menu"> 2.0 Menu </li>
      <li class="button_menu"> 3.0 Menu </li>
    </ul>
		
   </nav>

  </div>
  
</div>

我遇到此错误:

  

reCAPTCHA找不到用户提供的功能:onloadCaptchaCallback

该功能尚未定义... 如果我删除

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

然后找到回调... 我使用带有“模式”复选框的Google ReCaptcha v2。

1 个答案:

答案 0 :(得分:1)

您和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:

How to loop through selected elements with document.querySelectorAll