javascript Google“reCaptcha”有时不会显示/呈现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31776929/
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
Google "reCaptcha" sometimes doesn't get displayed/rendered
提问by Dexkill
Sometimes I have to reload the webpage multiple times till the reCaptcha gets rendered. I and a friend tested both on Firefox and Chrome but the problem is consistent and doesn't seem to depend on the used browser.
有时我必须多次重新加载网页，直到呈现 reCaptcha。我和一个朋友在 Firefox 和 Chrome 上都进行了测试，但问题是一致的，似乎与使用的浏览器无关。
The code I use to display my reCaptcha's:
我用来显示我的 reCaptcha 的代码：
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
<script>
var CaptchaCallback = function(){
grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdbWAo..'});
grecaptcha.render('RecaptchaField2', {'sitekey' : '6LfAVAo..'});
grecaptcha.render('RecaptchaField3', {'sitekey' : '6LfqWwo..'});
grecaptcha.render('RecaptchaField4', {'sitekey' : '6Lf4sAo..'});
};
And later in the forms I just added: <div id="RecaptchaField1"></div>with the correct number.
后来在我刚刚添加的表格中：<div id="RecaptchaField1"></div>使用正确的数字。
The forms are allways inside of a bootstrap modal if that cares?
如果关心的话，这些表单总是在引导模式内？
Edit:I deleted the asyncand deferatributes.
编辑：我删除了async和defer属性。
Edit 2:Page that has the problems: http://www.dexquote.com
编辑 2：有问题的页面：http: //www.dexquote.com
回答by Heidar
This problem appeared with me in google maps when initializing the map on hidden div (e.g. a modal). I'd solve this problem by removing the initialization from the page load and initialize each captcha when the modal is being displayed like that:
这个问题出现在谷歌地图中，当在隐藏的 div（例如模态）上初始化地图时。我会通过从页面加载中删除初始化并在模式显示时初始化每个验证码来解决这个问题：
$(document).ready(function () {
$('#loginModal').on('shown.bs.modal', function () {
grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
})
$('#loginModal').on('hide.bs.modal', function () {
$("#RecaptchaField1").empty();
})
});
回答by Dusan
If you have single page with this problem, remove "defer async" from recaptcha script load, and put "defer" on callback function.
如果您的单页存在此问题，请从 recaptcha 脚本加载中删除“延迟异步”，并将“延迟”放在回调函数上。
Reason why you have problem is that loading remote scripts can last longer than loading other local scripts, so your render function is called before grecaptcha is fully loaded. When you remove defer async from remote script and put defer on callback, grecaptcha will be loaded during the page loading process and it will call callback function which will be triggered after page is completely loaded, so if you have no other "defer" marked scripts, grecaptcha.render() will be last thing to do on that page.
出现问题的原因是加载远程脚本的时间比加载其他本地脚本的时间长，因此在 grecaptcha 完全加载之前调用渲染函数。当您从远程脚本中删除 defer async 并将 defer 置于回调中时，grecaptcha 将在页面加载过程中加载，并且它将调用将在页面完全加载后触发的回调函数，因此如果您没有其他“延迟”标记的脚本, grecaptcha.render() 将是该页面上要做的最后一件事。
Code would look like this:
代码如下所示：
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit'></script>
<script defer>
var CaptchaCallback = function(){
grecaptcha.render('htmlElementId', {'sitekey' : 'yourSiteKey'});
};
</script>
回答by Gleb
I had a similar issue, but my captcha was not rendered and when I tried to call grecaptcha.getResponse() I saw the following error:
我有一个类似的问题，但我的验证码没有呈现，当我尝试调用 grecaptcha.getResponse() 时，我看到了以下错误：
Error: Invalid ReCAPTCHA client id: undefined
In my case all custom scripts were included at the bottom of the HTML file, so I had a pure race condition that was mentioned by the recaptcha docs.
在我的例子中，所有自定义脚本都包含在 HTML 文件的底部，所以我有一个 recaptcha 文档提到的纯竞争条件。
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 (https://developers.google.com/recaptcha/docs/display)
注意：您的 onload 回调函数必须在 reCAPTCHA API 加载之前定义。为确保没有竞争条件：
首先使用回调对脚本进行排序，然后 reCAPTCHA 使用脚本标签中的 async 和 defer 参数 ( https://developers.google.com/recaptcha/docs/display)
With asyncand deferoptions the captcha failed 1 of 10 (or sometimes 1 of 30) reloads of the page. But when I removed them both - the situation became clear what was wrong. I hope this mention will be helpful for somebody.
使用async和defer选项，验证码失败了 10 次（或有时 30 次中的 1 次）页面重新加载中的 1 次。但是当我将它们都删除时 - 情况变得很清楚是哪里出了问题。我希望这个提及对某人有帮助。
回答by Carlos Moreira
Just put
就放
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
at the end of tag <body>
在标签的末尾 <body>
Ex.
前任。
<body>
...some html...
<div id='googleRecaptcha'></div>
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
</body>
