Javascript Google REcaptcha 未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30832957/
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 not showing
提问by Fane
I have the following in my <body>
我有以下内容 <body>
<div class="g-recaptcha" data-sitekey="some-key (original is right)">
and this on my <head>
这在我的 <head>
<script src="//www.google.com/recaptcha/api.js"></script>
but nothing is shown, either on firefox or chrome... Is this a known issue?
但在 Firefox 或 chrome 上没有显示任何内容......这是一个已知问题吗？
回答by Andrei
make sure that <script src="//www.google.com/recaptcha/api.js"></script>is the last thing before closing of head tag.
That fixed same problem for me
确保这<script src="//www.google.com/recaptcha/api.js"></script>是关闭 head 标签之前的最后一件事。为我解决了同样的问题
回答by Shadow Wizard is Ear For You
Just hit this obstacle, and in my case it was due to AngularJS. It's not limited to Angular, any library which binds the elements after page load can cause the Google reCAPTCHA to not show up since the element just does not exist by the time Google's code is being executed.
刚遇到这个障碍，就我而言，这是由于 AngularJS。它不仅限于 Angular，任何在页面加载后绑定元素的库都可能导致 Google reCAPTCHA 不显示，因为在执行 Google 的代码时该元素不存在。
To solve this, first make the render explicit and supply a function to execute when the reCAPTCHA loads:
要解决此问题，请首先使渲染显式并在 reCAPTCHA 加载时提供要执行的函数：
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>
Now, add a unique ID to the container, e.g.
现在，为容器添加一个唯一的 ID，例如
<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>
Then in the custom function wait for the element to actually exist:
然后在自定义函数中等待元素实际存在：
var _captchaTries = 0;
function recaptchaOnload() {
_captchaTries++;
if (_captchaTries > 9)
return;
if ($('.g-recaptcha').length > 0) {
grecaptcha.render("recaptcha", {
sitekey: 'site key here',
callback: function() {
console.log('recaptcha callback');
}
});
return;
}
window.setTimeout(recaptchaOnload, 1000);
}
This will keep trying for 10 seconds, until it finds the element, then render the reCAPTCHA into it.
这将持续尝试 10 秒，直到找到该元素，然后将 reCAPTCHA 渲染到其中。
回答by crmpicco
Make sure you don't have any content blockers activated in your browser, for example Ad-Block Plus or uBlock origin.
确保您的浏览器中没有激活任何内容拦截器，例如 Ad-Block Plus 或 uBlock origin。
Disable these, refresh the page and submit the form again.
禁用这些，刷新页面并再次提交表单。
回答by woolm110
The issue I had was that it was showing most of the time but occasionally it wouldn't and I'd have to submit the form (and trigger validation) for it to show. Adding ?render=explicitto the script tag fixed it for me.
我遇到的问题是它大部分时间都在显示，但偶尔不会显示，我必须提交表单（并触发验证）才能显示。添加?render=explicit到脚本标签为我修复了它。
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
https://developers.google.com/recaptcha/docs/display#explicit_render
https://developers.google.com/recaptcha/docs/display#explicit_render
回答by DTM
I just had this on a system that has stricter browser settings.
Adding *.gstatic.comto the trusted list resolved it
我刚刚在浏览器设置更严格的系统上安装了这个。
添加*.gstatic.com到受信任列表解决了它
I also added *.google.comand *.google-analytics.com
我还添加了*.google.com和*.google-analytics.com
Hope that helps someone
希望能帮助某人
回答by panda.o24
Change:
改变：
<script src="//www.google.com/recaptcha/api.js"></script>
to:
到：
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
I don't know if that's just a typo, if it isn't, adding the https:would definitely solve your problem.
我不知道这是否只是一个错字，如果不是，添加https:肯定会解决您的问题。
