动态加载reCAPTCHA

时间：2016-02-06 19:58:27

标签： javascript jquery recaptcha

有几种方法可以使用javascript加载reCAPTCHA，如下所示：

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

此代码在pageload上加载验证码。我想在点击＆＃34; MYBTN＆＃34;时加载reCAPTCHA。所以代码变成了：

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
 });
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

但是当我点击＆＃34; MYBTN＆＃34;这段代码没有用。和reCAPTCHA没有加载。 帮帮我吧。感谢。

6 个答案:

答案 0 :(得分：9)

您只需要调用loadCaptcha（）

即可

＆＃13;
＆＃13; 
$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    loadCaptcha(); // THIS LINE WAS MISSING
 });
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：4)

简单情况

<强> HTML 

<input type="button" id="MYBTN" value="create captcha"> 
<div id="captcha_container"></div>

<强> JS 

var testSitekey = '6LeLzA4UAAAAANNRnB8kePzikGgmZ53aWQiruo7O';

$('#MYBTN').click(function() {
  $('body').append($('<div id="captcha_container" class="google-cpatcha"></div>'));
  setTimeout(function() {
    grecaptcha.render('captcha_container', {
      'sitekey': testSitekey
    });
  }, 1000);
});

Online demo (jsfiddle)

答案 2 :(得分：2)

您刚刚在嵌入式脚本中提到了onload。您可以从嵌入式脚本中删除onload，也可以将代码保留在函数名称loadCaptcha中的onclick事件之外。

<强> 1。第一个解决方案： 

$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    }
 });

<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

<强> 2。第二个解决方案 

<script type='text/javascript'>
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
 </script>
<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>

在第一个解决方案中，当您单击按钮时，您的代码将起作用。即使你不必把它放在loadCaptcha函数中，你也可以直接调用grecaptcha.render。

但是当你在脚本标记中提到onload然后根据你的点击它将无法工作，那么它将找到你在脚本中提到的回调函数。当你在onload脚本中编写loadCaptcha并在onClick事件中编写了这个函数。当脚本标签执行时，代码试图找到loadCaptcha函数，该函数在执行脚本标记之前没有初始化（因为它会在click事件上初始化），所以你的脚本无效。

答案 3 :(得分：1)

JS 

// Loading captcha with JavaScript on button click
jQuery(document).ready(function ($) {
    $('#MYBTN').on('click',function() {
        $.getScript( "https://www.google.com/recaptcha/api.js?render=__YOUR_KEY__" )
        .done(function( script, textStatus ) {
            if(typeof grecaptcha !== "undefined") {
                grecaptcha.ready(function () {
                    grecaptcha.execute('__YOUR_KEY__', {
                        action: 'homepage'
                    })
                    .then(function (token) {
                        var recaptchaResponse = document.getElementById('captcha_container');
                        recaptchaResponse.value = token;
                    });

                    // Your other code here
                    // You can control captcha badge here
                });
            }
        });
    });
});

HTML 

// Required HTML:
<body>
    <input type="button" id="MYBTN" value="MYBTN">
    <div id="captcha_container"></div>
</body>

答案 4 :(得分：0)

仅在表单的必填字段之一成为焦点之后，我才实现了验证码的加载。我还实现了一个检查变量，以查看是否已插入验证码的依赖项。

这是：

Microsoft.EntityFrameworkCore.Metadata.SqlServerValueGenerationStrategy.SequenceHiLo

请注意，在我的情况下，我有一个jQuery('#MyRequiredInputId').focus(function () { if(typeof loadedRecaptcha != 'undefined'){ return; } jQuery.getScript("https://www.google.com/recaptcha/api.js?render=___YOURKEY__") .done(function (script, textStatus) { if (typeof grecaptcha !== "undefined") { grecaptcha.ready(function () { var siteKey = '___YOURKEY___'; jQuery('body').append(jQuery('<div id="captcha_container" class="google-cpatcha"></div>')); setTimeout(function() { grecaptcha.render('captcha_container', { 'sitekey': siteKey }); }, 1000); }); } loadedRecaptcha = true; }); }); ，我想在其中显示验证码。

结果：

documentation

答案 5 :(得分：0)

今天，即使没有打开登录模式，我也发现大约有21个针对Google Recaptcha的请求，我遇到了同样的问题：

尝试此方法后：

HTML 

<div class="row">
  <div class="col-sm-12 btm10">
     <div id="captcha_container"></div>
   </div>
</div>

JS 

<script>
var Sitekey = '<?php echo config('google_key') ?>';

$('#loginbtn').click(function() {
  $('body').append($('<div id="captcha_container" class="google-cpatcha"></div>'));
  setTimeout(function() {
    grecaptcha.render('captcha_container', {
      'sitekey': Sitekey
    });
  }, 1000);
});
</script>

最后，我得到了想要的结果，现在只有在登录模式打开时（基于onClick函数），才会重新加载recaptcha。

不幸的是，我发现，即使在使用上述延迟方法时，主Google Recaptcha脚本仍在控制台中加载，因为主脚本是在页面头上声明的：

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

recaptcha script loads in console

因此，我将其从page head中删除，然后将几行代码组合在一起以使其起作用，并且仅在模式打开时才加载，如下所示：

最终代码：

<div class="row">
  <div class="col-sm-12 btm10">
     <div id="captcha_container"></div>
   </div> //Wherever you want the reCaptcha to appear
</div>

<script>
//Add to the header or the footer it doesn't matter

var Sitekey = '<?php echo config('google_key') ?>';

$('#loginbtn').click(function() {
  $.getScript("https://www.google.com/recaptcha/api.js") //The trick is here.
  $('body').append($('<div id="captcha_container" class="google-cpatcha"></div>'));
  setTimeout(function() {
    grecaptcha.render('captcha_container', {
      'sitekey': Sitekey
    });
  }, 1000);
});
</script>

您可以在此处查看其运行情况： https://youtu.be/dAZOSMR8iI8

谢谢

相关问题
最新问题