Google "reCaptcha" 有时得不到 displayed/rendered
Google "reCaptcha" sometimes doesn't get displayed/rendered
有时我必须多次重新加载网页，直到呈现 reCaptcha。我和一个朋友在 Firefox 和 Chrome 上都进行了测试，但问题是一致的，似乎并不取决于所使用的浏览器。
我用来显示我的 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..'});
};
然后在我刚刚添加的表格中：<div id="RecaptchaField1"></div> 加上正确的数字。
表单总是在 bootstrap 模态框内，如果需要的话？
编辑：
我删除了 async 和 defer 属性。
编辑 2：
有问题的页面：http://www.dexquote.com
我在 google 地图上初始化隐藏的 div 地图（例如模态）时出现了这个问题。
我会通过从页面加载中删除初始化并在模态显示时初始化每个验证码来解决这个问题：
$(document).ready(function () {
$('#loginModal').on('shown.bs.modal', function () {
grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
})
$('#loginModal').on('hide.bs.modal', function () {
$("#RecaptchaField1").empty();
})
});
如果您的单页出现此问题，请从 recaptcha 脚本加载中删除 "defer async"，并将 "defer" 放在回调函数上。
你有问题的原因是加载远程脚本比加载其他本地脚本持续时间更长，所以你的渲染函数在 grecaptcha 完全加载之前被调用。
当你从远程脚本中删除 defer async 并将 defer 放在回调上时，grecaptcha 将在页面加载过程中加载，它将调用回调函数，该函数将在页面完全加载后触发，所以如果你没有其他 "defer"标记的脚本，grecaptcha.render() 将是该页面上最后要做的事情。
代码如下所示：
<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>
我遇到了类似的问题，但我的验证码没有呈现，当我尝试调用 grecaptcha.getResponse() 时，我看到了以下错误：
Error: Invalid ReCAPTCHA client id: undefined
在我的例子中，所有自定义脚本都包含在 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)
使用 async 和 defer 选项，验证码在 10 次（或有时 30 次中的 1 次）重新加载页面时失败了 1 次。但是当我将它们都删除时 - 情况变得很清楚出了什么问题。我希望这篇文章对某些人有所帮助。
就放
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
在标记的末尾 <body>
例如
<body>
...some html...
<div id='googleRecaptcha'></div>
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
</body>
上面的答案给了我很好的指导，但对我不起作用。我想出了一个在加载弹出窗口后运行 200ms 的解决方案。我发现这个解决方案更可靠，因为它适用于大多数情况，也适用于其他弹出库。
$(document).ready(function () {
$('#loginModal').on('shown.bs.modal', function () {
setTimeout(function() {
if(jQuery('#RecaptchaField1').length) {
grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key'});
}
}, 200);
});
});
如果您正在使用 Divi Popup 并想在其上呈现 reCaptcha，下面是要使用的代码。请将此代码保存在 wordpress 主题 header 中包含的 js 文件中。
DiviArea.addAction('show_area', function() {
setTimeout(function(){
if(jQuery('#RecaptchaField1').length) {
grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key', 'callback': 'recaptchaDataCallback'});
}
}, 200);
});
还请记住在 header 或弹出窗口中包含 reCaptcha api 代码。
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
有时我必须多次重新加载网页，直到呈现 reCaptcha。我和一个朋友在 Firefox 和 Chrome 上都进行了测试，但问题是一致的，似乎并不取决于所使用的浏览器。
我用来显示我的 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..'});
};
然后在我刚刚添加的表格中：<div id="RecaptchaField1"></div> 加上正确的数字。
表单总是在 bootstrap 模态框内，如果需要的话？
编辑：
我删除了 async 和 defer 属性。
编辑 2： 有问题的页面：http://www.dexquote.com
我在 google 地图上初始化隐藏的 div 地图（例如模态）时出现了这个问题。 我会通过从页面加载中删除初始化并在模态显示时初始化每个验证码来解决这个问题：
$(document).ready(function () {
$('#loginModal').on('shown.bs.modal', function () {
grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
})
$('#loginModal').on('hide.bs.modal', function () {
$("#RecaptchaField1").empty();
})
});
如果您的单页出现此问题，请从 recaptcha 脚本加载中删除 "defer async"，并将 "defer" 放在回调函数上。
你有问题的原因是加载远程脚本比加载其他本地脚本持续时间更长，所以你的渲染函数在 grecaptcha 完全加载之前被调用。 当你从远程脚本中删除 defer async 并将 defer 放在回调上时，grecaptcha 将在页面加载过程中加载，它将调用回调函数，该函数将在页面完全加载后触发，所以如果你没有其他 "defer"标记的脚本，grecaptcha.render() 将是该页面上最后要做的事情。
代码如下所示：
<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>
我遇到了类似的问题，但我的验证码没有呈现，当我尝试调用 grecaptcha.getResponse() 时，我看到了以下错误：
Error: Invalid ReCAPTCHA client id: undefined
在我的例子中，所有自定义脚本都包含在 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)
使用 async 和 defer 选项，验证码在 10 次（或有时 30 次中的 1 次）重新加载页面时失败了 1 次。但是当我将它们都删除时 - 情况变得很清楚出了什么问题。我希望这篇文章对某些人有所帮助。
就放
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
在标记的末尾 <body>
例如
<body>
...some html...
<div id='googleRecaptcha'></div>
<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
</body>
上面的答案给了我很好的指导，但对我不起作用。我想出了一个在加载弹出窗口后运行 200ms 的解决方案。我发现这个解决方案更可靠，因为它适用于大多数情况，也适用于其他弹出库。
$(document).ready(function () {
$('#loginModal').on('shown.bs.modal', function () {
setTimeout(function() {
if(jQuery('#RecaptchaField1').length) {
grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key'});
}
}, 200);
});
});
如果您正在使用 Divi Popup 并想在其上呈现 reCaptcha，下面是要使用的代码。请将此代码保存在 wordpress 主题 header 中包含的 js 文件中。
DiviArea.addAction('show_area', function() {
setTimeout(function(){
if(jQuery('#RecaptchaField1').length) {
grecaptcha.render('RecaptchaField1', {'sitekey': 'your_site_key', 'callback': 'recaptchaDataCallback'});
}
}, 200);
});
还请记住在 header 或弹出窗口中包含 reCaptcha api 代码。
<script src="https://www.google.com/recaptcha/api.js" async defer></script>