动态加载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>这段代码在页面加载时加载captcha。我想在点击"MYBTN“时加载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>但是当我点击"MYBTN“和reCAPTCHA not load时，这段代码不起作用。请帮帮我。谢谢。
回答 6
Stack Overflow用户
发布于 2016-02-07 04:05:41
您只需要调用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>
Stack Overflow用户
发布于 2018-01-17 17:08:48
简单情况
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);
});Stack Overflow用户
发布于 2018-01-05 19:55:31
您刚刚在您的嵌入式脚本中提到了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>在第一个解决方案中，当您单击按钮时，您的代码将工作。即使你不需要把then放在loadCaptcha函数中，你也可以直接调用grecaptcha.render。
但是当您在脚本标记中提到onload时，它将不会根据您的单击而工作，然后它会找到您在脚本中提到的回调函数。当您在onload of script中编写loadCaptcha时，您在onClick事件中编写了此函数。当脚本标记执行时，代码试图查找直到脚本标记执行才初始化的loadCaptcha函数(就像它在单击事件时初始化一样)，因此您的脚本无法工作。
https://stackoverflow.com/questions/35245768
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号