Geek Answers Handbook

Google reCaptcha sometimes not showing / showing

Sometimes I have to reload a webpage several times until reCaptcha displays. My friend and I tested both in Firefox and in Chrome, but the problem is consistent and does not seem to depend on the browser used.

The code I use to display my 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 on the forms, I simply added: <div id="RecaptchaField1"></div> with the correct number.

Forms are always inside boot modal, if that worries?

Edit: I removed the async and defer .

Edit 2: Page that has problems: http://www.dexquote.com

+5
source share
4 answers

This problem occurred to me on Google maps when initializing the map on a hidden div (e.g. modal). I would solve this problem by removing the initialization from the page load and initializing each captcha when the modal text is displayed as follows:

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

If you have one page with this problem, remove "defer async" from the recaptcha script download and put "defer" on the callback function.

The reason the problem arises is that loading remote scripts may take longer than loading other local scripts, so your rendering function is called before grecaptcha is fully loaded. When you remove the asynchronous disconnect from the remote device script and defer the delay on the callback, grecaptcha will load during the page loading process and it will call the callback function that will be run after the page is fully loaded, so if you have no other “delayed” response, marked scripts, grecaptcha.render () will be the last thing to do on this page.

The code will 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>
+1
source

I had a similar problem, but my captcha was not processed, and when I tried to call grecaptcha.getResponse (), I saw the following error:

 Error: Invalid ReCAPTCHA client id: undefined

In my case, all user scripts were included at the bottom of the HTML file, so I had a clean race condition that was mentioned in recaptcha docs.

Note: your onload callback function must be defined before the reCAPTCHA API is loaded. To ensure the absence of race conditions:

first order your scripts with a callback, and then reCAPTCHA use asynchronous and pending parameters in the script tags ( https://developers.google.com/recaptcha/docs/display )

With the async and defer in the captcha, a 1 out of 10 (or sometimes 1 out of 30) page reload failed. But when I deleted them both, the situation understood what had happened. I hope this mention is helpful to someone.

0
source

Just put

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

at the end of the <body>

Ref.

 <body> ...some html... <div id='googleRecaptcha'></div> <script src="https://www.google.com/recaptcha/api.js?onload=callback&render=explicit"></script> </body>
-2
source

More articles:


All Articles