Google reCAPTCHA 在 bootstrap 模型上第二次失败

Question

我有一个包含多个字段的表单和 google 我在弹出窗口中打开的重新验证码 model.For 第一次一切正常。

但是当我关闭弹出窗口并尝试第二次打开弹出窗口时，我收到错误消息“没有Found.The请求url在此服务器上找不到”。

这是我的 HTML 代码：

  <div id="RecaptchaField2"></div>

Javascript :

<script type='text/javascript'>
  var CaptchaCallback = function() {
      if ( $('#RecaptchaField2').length ) {
        grecaptcha.render('RecaptchaField2', {'sitekey' : 
            '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });
      }
   }

    $(".inq-button").click(function(){
      setTimeout(function() {
          var script = document.createElement('script');
          script.src = 'https://www.google.com/recaptcha/api.js?
          onload=CaptchaCallback&render=explicit';
          script.type = 'text/javascript';
         document.body.parentNode.appendChild(script);         
     }, 100); 
   });
</script>

从上周开始这个问题就一直困扰着我，我到现在都不知道为什么会这样。

你能给我一些适当的建议吗？

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

您需要在渲染之前清除验证码 grecaptcha.reset()

但是，为了使此功能正常工作，您必须像这样显式呈现 reCaptacha：

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

Answer 2

使用这个脚本，它会工作。

<script>
    var CaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });
    }
}

var j = 1;

$(".inq-button").click(function(){


   setTimeout(function() {
    if(j){
      var script = document.createElement('script');
      script.src = 'https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit';
      script.type = 'text/javascript';
      document.body.parentNode.appendChild(script);
 }
 else
 {
    $('#RecaptchaField2').empty();
    removejscssfile("api.js", "js"); //remove all occurences of "somescript.js" on page
    var onloadCallback = function() {

        if ( $('#RecaptchaField2').length ) {
            grecaptcha.render('RecaptchaField2', {'sitekey' : '6LdG1ioUAAAAANOH2BnJO_5zv0NE2UNZS9jou7Yh'
       });


    }
    }; 
    var script = document.createElement('script');
    script.src = 'https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit';
    script.type = 'text/javascript';
    document.body.parentNode.appendChild(script);
   }

   j = 0;

   }, 100);

   });  


 function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
    allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
  }
}
</script>