Google "reCaptcha" иногда не отображается/отображается

иногда мне приходится перезагружать страницу несколько раз, пока окно отрисовывается. Я и друг тестировали как на Firefox, так и на Chrome, но проблема последовательна и, похоже, не зависит от используемого браузера.

код я использую, чтобы отобразить мой рекапчи это:

 <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, если это заботится?

Edit: Я удалил async и defer атрибутации.

Edit 2: Страница, которая имеет проблемы:http://www.dexquote.com

6
css html javascript jquery recaptcha

4 ответов

эта проблема появилась со мной в Google maps при инициализации карты на скрытом div (например, модальном). Я бы решил эту проблему, удалив инициализацию из загрузки страницы и инициализируя каждую капчу, когда модальный отображается так:

$(document).ready(function () {
    $('#loginModal').on('shown.bs.modal', function () {
        grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
    })
    $('#loginModal').on('hide.bs.modal', function () {
        $("#RecaptchaField1").empty();
    })
});
9

Если у вас есть одна страница с этой проблемой, удалите "defer async" из загрузки сценария recaptcha и поместите "defer" в функцию обратного вызова.

причина проблемы в том, что загрузка удаленных скриптов может длиться дольше, чем загрузка других локальных скриптов, поэтому ваша функция рендеринга вызывается до полной загрузки grecaptcha. Когда вы удалите defer async из удаленного скрипта и поместите defer на обратный вызов, grecaptcha будет загружен во время процесса загрузки страницы, и он вызовет обратный вызов функция, которая будет запущена после полной загрузки страницы, поэтому, если у вас нет других "отложенных" отмеченных скриптов, 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>
1

у меня была аналогичная проблема, но моя капча не была оказана, и когда я попытался вызвать grecaptcha.getResponse () я увидел следующую ошибку:

Error: Invalid ReCAPTCHA client id: undefined

в моем случае все пользовательские скрипты были включены в нижней части HTML-файла, поэтому у меня было чистое состояние гонки, которое упоминалось в документах recaptcha.

Примечание: ваша функция обратного вызова onload должна быть определена до reCAPTCHA API загружается. Чтобы убедиться, что нет условий гонки:

порядок сначала ваши скрипты с обратным вызовом, а затем reCAPTCHA используют параметры async и defer в тегах скрипта (https://developers.google.com/recaptcha/docs/display)

С async и deferпараметры captcha не удалось 1 из 10 (или иногда 1 из 30) перезагрузки страницы. Но когда я убрал их обоих-ситуация прояснилась, что было не так. Надеюсь, это упоминание кому-нибудь поможет.

0

просто поставить

<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>

В конце тега <body>

Ex.

<body>
...some html...
<div id='googleRecaptcha'></div>

<script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script>
</body>
-2