负载验证码动态

有几种方法来加载使用javascript验证码如下面：在页面加载负载验证码动态

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

此代码负载验证码。我想在点击“MYBTN”时加载reCAPTCHA。因此，代码变为：

但是，当我点击“MYBTN”和验证码无法加载此代码没有工作。帮我看看。谢谢。

来源

2016-02-06 Reza

你只需要调用loadCaptcha（）

$('#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 
 
});

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

来源

2016-02-06 20:05:40 Gavriel

为什么不能在http://www.warcraft-fans.ir/reza/i.html – Reza

上为我工作，因为您混合了您问题中的两个版本。你说你有一个onload的工作版本，并要求一个只加载onclick的版本。您网站上的代码现在会加载。您需要将完整的js部分更改为我答案中的内容（onclick事物...） – Gavriel

你只是在你嵌入脚本提到的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函数，该函数在执行脚本标记之前未初始化（因为它会在点击事件时进行初始化），所以您的脚本不起作用。

来源

2018-01-05 11:55:31

简单的情况

的Html

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

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)

来源

2018-01-17 09:08:48

回答

相关问题