Javascript 显式渲染 ReCaptcha - Onload 函数未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30262208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Explicitly Rendering ReCaptcha - Onload Function Not Firing
提问by Gofilord
From the documentation I understood that in order to change the language of the recaptcha I have to render it explicitly.
从文档中我了解到，为了更改 recaptcha 的语言，我必须明确地呈现它。
The problem is, however, that it's not really showing up, and the onloadis not even called.
When I try to render it automatically it does work.
然而，问题是它并没有真正出现，onload甚至没有被调用。
当我尝试自动渲染它时，它确实有效。
Here's the code:
In the HTML head: (I have also tried putting this at the end of the body tag)
这是代码：
在 HTML 头中：（我也尝试将其放在 body 标签的末尾）
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
In the HTML form:
在 HTML 表单中：
<div id="recaptcha"></div>
Javascript:
Javascript：
var recaptchaCallback = function() {
console.log('recaptcha is ready'); // not showing
grecaptcha.render("recaptcha", {
sitekey: 'My Site Key',
callback: function() {
console.log('recaptcha callback');
}
});
}
采纳答案by Raad
I just copied your code, used my own Site Key and it works.
我刚刚复制了您的代码，使用了我自己的站点密钥，并且可以正常工作。
The code I used is:
我使用的代码是：
<html>
<body>
<p>ReCaptcha Test</p>
<div id="recaptcha"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
<script type="text/javascript">
var recaptchaCallback = function () {
console.log('recaptcha is ready'); // showing
grecaptcha.render("recaptcha", {
sitekey: 'SITE_KEY',
callback: function () {
console.log('recaptcha callback');
}
});
}
</script>
</body>
</html>
Check your code carefully, as just a single character typo can stop things from working.
仔细检查您的代码，因为仅仅一个字符的拼写错误就可以使事情停止工作。
回答by Aaron
Make sure that your onload method is defined before the recaptcha script. Otherwise you will have a race condition where the recaptcha script could be attempting to call your method before it is defined (especially if the recaptcha script is cached).
确保您的 onload 方法在 recaptcha 脚本之前定义。否则，您将遇到竞争条件，在这种情况下，recaptcha 脚本可能会在定义之前尝试调用您的方法（尤其是在缓存了 recaptcha 脚本的情况下）。
From the documentation for onload https://developers.google.com/recaptcha/docs/display
来自 onload https://developers.google.com/recaptcha/docs/display的文档
Note: your onload callback function must be defined before the reCAPTCHA API loads. To ensure there are no race conditions:
- order your scripts with the callback first, and then reCAPTCHA
- use the async and defer parameters in the script tags
注意：您的 onload 回调函数必须在 reCAPTCHA API 加载之前定义。为确保没有竞争条件：
- 首先使用回调订购您的脚本，然后重新验证码
- 在脚本标签中使用 async 和 defer 参数
For example:
例如：
<div id="recaptcha"></div>
<script type="text/javascript">
var recaptchaCallback = function () {
console.log('recaptcha is ready'); // not showing
grecaptcha.render("recaptcha", {
sitekey: 'SITE_KEY',
callback: function () {
console.log('recaptcha callback');
}
});
}
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=iw" async defer></script>
回答by Kareem
HTML
HTML
<div id="captcha"></div>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReadycallback&render=explicit' async defer'></script>
Javascript
Javascript
//render captcha and set call back function on api.js load finish
function recaptchaReadycallback(){
grecaptcha.render('captcha', {
'callback' : recaptchaCheckedCallback,
'expired-callback': recaptchaExpiredCallback,
'sitekey': 'YOUR-SITE-KEY'
});
}
//on expiry do stuff. i.e. show error
function recaptchaExpiredCallback(){
grecaptcha.reset();
//show 'check the bloody box' error
};
//on not a robot confirmation do stuff. i.e. hide error
function recaptchaCheckedCallback(){
//hide 'check the bloody box' error
}
回答by Nacht - Reinstate Monica
My problem was that I did not realise that the second callback is only fired upon submission of the form - whereas the first callback is executed on page load.
我的问题是我没有意识到第二个回调仅在提交表单时触发 - 而第一个回调在页面加载时执行。
