Question

我有一个包含多个字段的表单＆amp;我在弹出模型中打开的google recaptcha。这是第一次一切正常。

但当我关闭弹出窗口并尝试第二次打开弹出窗口时，我收到错误“未找到。此服务器上找不到请求的网址”。

这是我的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>

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

2 个答案: