Uncaught ReferenceError: grecaptcha is not defined

Question

我正在使用 recaptcha v2

我偶尔会收到以下错误（有时我不会收到错误，有时我会收到）

Uncaught ReferenceError: grecaptcha is not defined

好像是因为内部的http请求。这需要一些时间才能获得另一个 js recaptcha__en.js。同时执行 grecaptcha 的实际渲染代码。

那么避免这个问题的标准解决方案是什么？

PS ：当然我正在寻找 setTimeout

以外的解决方案

Answer 1

Recaptcha 有一个 onload 回调，一旦加载 recaptcha 就会 运行。将您的代码放在该回调函数中。

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

<script>
    function onloadCallback() {
        /* Place your recaptcha rendering code here */
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>

Answer 2

我已经通过按以下方式订购脚本解决了这个问题

HTML

<div id="review_recaptcha"></div>

jQuery

<script type="text/javascript">
      var review_recaptcha_widget;
      var onloadCallback = function() {
        if($('#review_recaptcha').length) {
            review_recaptcha_widget = grecaptcha.render('review_recaptcha', {
              'sitekey' : '<?php echo $site_key?>'
            });
        }
      };      
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Answer 3

我的问题通过在脚本代码中进行以下更改得到解决（：

即来自内部路径

<script src='static/js/recaptcha/api.js'></script>

到外部 google 路径，即

<script src='https://www.google.com/recaptcha/api.js'></script>

Answer 4

有时应用程序会在刷新后多次加载脚本 'https://www.google.com/recaptcha/api.js，请确保您的应用程序没有多次 <script async="" defer="" src="https://www.google.com/recaptcha/api.js"></script>

Answer 5

它适用于着陆页，也适用于 bootstrap 4 弹出窗体：

<script src="https://www.google.com/recaptcha/api.js?render=ADD-YOUR-RECAPTCHA-SITE-KEY-HERE"></script>
<script>
var interval = setInterval(function(){
  if(window.grecaptcha){
        grecaptcha.ready(function() {
            grecaptcha.execute('ADD-YOUR-RECAPTCHA-SITE-KEY-HERE', {action: 'homepage'}).then(function(token) {
              $('#i-recaptcha').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
            });
        });
    clearInterval(interval);
  }
}, 100);
</script>

感谢您提出这个问题。 :)

Answer 6

我知道这是一个老问题，但也许这会对某人有所帮助。我收到此 'Uncaught ReferenceError: grecaptcha is not defined' 错误的原因是因为我无法访问托管在 www.gstatic.com 上的依赖 js 文件 (recaptcha_en.js)。一旦我解决了这个问题，它就对我有用了。

Answer 7

我已经通过更新站点密钥和密钥解决了问题。实际上我使用的是 v3 API 但使用的是 v2 配置。

使用 v3 密钥后，我的验证码工作正常。

Answer 8

对我来说它工作了很多年然后突然停止了。

从

切换API负载

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

使用异步和延迟修复它

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