解决 Google ReCaptcha 无法异步加载

0、问题描述

使用如下代码:

html
1
2
3
<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 控制台报错:

Text
1
Uncaught ReferenceError: grecaptcha is not defined

1、解决方法

显然是加载顺序问题,只要把defer去掉,同步加载就可以了

异步加载才不会阻塞页面,因此可以使用回调函数的方式解决。

原理:使用参数onload=callBack会在加载完 ReCaptcha 的 JS 文件后调用回调函数,以保证按顺序执行。

示例代码:

html
1
2
3
<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/tw/archives/887/

也可以使用我的镜像站:

清北 CDN
Google 综合加速 - Google ReCaptcha 加速

解决 Google ReCaptcha 无法异步加载

https://blog.tsinbei.com/tw/archives/1298/

文章作者
Hsukqi Lee
发布于

2023-06-22

修改于

2023-06-22

许可协议

CC BY-NC-ND 4.0

评论

昵称
邮箱
网址
1 条

耀阳

耀阳

Cloudflare Turnstile是不是也可以用这个方法解决

  回复

Hsukqi Lee

Hsukqi Lee 作者

是的,我已经把reCaptcha全换成Turnstile了,有空写一篇文章(最近太忙了,好多计划更新的内容都鸽了)

  回复