Question

我的<body>

中有以下内容

<div class="g-recaptcha" data-sitekey="some-key (original is right)">

这是我的<head>

<script src="//www.google.com/recaptcha/api.js"></script>

但是在firefox或chrome上都没有显示任何内容......这是一个已知的问题吗？

Answer 1

确保在关闭head标记之前<script src="//www.google.com/recaptcha/api.js"></script>是最后一件事。那为我解决了同样的问题

Answer 2

刚刚遇到这个障碍，在我的情况下，这是由于AngularJS。它不仅限于Angular，任何在页面加载后绑定元素的库都可能导致Google reCAPTCHA无法显示，因为在执行Google代码时该元素不存在。

要解决这个问题，首先要使渲染显式化并提供一个在reCAPTCHA加载时执行的函数：

<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>

现在，为容器添加一个唯一的ID，例如

<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>

然后在自定义函数中等待元素实际存在：

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);
}

这将持续尝试10秒，直到找到元素，然后将reCAPTCHA渲染到其中。

Answer 3

确保您的浏览器中没有激活任何内容屏蔽程序，例如Ad-Block Plus或uBlock源。

禁用它们，刷新页面并再次提交表单。

Answer 4

我遇到的问题是它大部分时间都在显示，但有时它不会，我必须提交表单（并触发验证）才能显示。将?render=explicit添加到脚本标记中为我修复了它。

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

https://developers.google.com/recaptcha/docs/display#explicit_render

Answer 5

我刚在具有更严格浏览器设置的系统上使用了这个将*.gstatic.com添加到受信任列表会解决它

我还添加了*.google.com和*.google-analytics.com

希望能帮到某人

Answer 6

变化：

<script src="//www.google.com/recaptcha/api.js"></script>

为：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

我不知道这只是一个错字，如果不是，添加https:肯定会解决你的问题。

谷歌REcaptcha没有显示

6 个答案: