0、问题描述
使用如下代码：
1 | <script data-instant defer src="https://recaptcha.net/recaptcha/api.js?render=SITE_KEY"></script>
<input type="hidden" name="recaptcha_response" id="recaptchaResponse" class="g-recaptcha"></input>
<script data-instant defer>grecaptcha.ready(function() {grecaptcha.execute(\''.$siteKey.'\', {action: \'social\'}).then(function(token) {var recaptchaResponse = document.getElementById(\'recaptchaResponse\');recaptchaResponse.value = token;});});</script> |
DevTools 控制台报错：
1 | Uncaught ReferenceError: grecaptcha is not defined |
1、解决方法
显然是加载顺序问题，只要把。defer去掉，同步加载就可以了
异步加载才不会阻塞页面，因此可以使用回调函数的方式解决。
原理：使用参数onload=callBack会在加载完 ReCaptcha 的 JS 文件后调用回调函数，以保证按顺序执行。
示例代码：
1 | <input type="hidden" name="recaptcha_response" id="recaptchaResponse" class="g-recaptcha"></input>
<script data-instant defer>function loadCaptcha(){grecaptcha.ready(function() {grecaptcha.execute(\''.$siteKey.'\', {action: \'social\'}).then(function(token) {var recaptchaResponse = document.getElementById(\'recaptchaResponse\');recaptchaResponse.value = token;});});};</script>
<script data-instant defer src="https://recaptcha.net/recaptcha/api.js?onload=loadCaptcha&render=SITE_KEY"></script> |
3、小建议
可以自建镜像站，参考文章：
搭建Google ReCaptcha镜像站
https://blog.tsinbei.com/archives/887/
也可以使用我的镜像站：
清北 CDN
Google 综合加速 - Google ReCaptcha 加速
解决 Google ReCaptcha 无法异步加载
评论