未捕获的 ReferenceError：未定义 grecaptcha答案

【问题标题】：Uncaught ReferenceError: grecaptcha is not defined未捕获的 ReferenceError：未定义 grecaptcha
【发布时间】：2015-07-01 14:08:24
【问题描述】：

我正在使用recaptcha v2

我偶尔会收到以下错误（有时我没有收到错误，有时我确实收到了）

Uncaught ReferenceError: grecaptcha is not defined

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

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

PS : 当然我正在寻找setTimeout以外的其他解决方案

【问题讨论】：

标签： javascript recaptcha

【解决方案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>

【讨论】：

但我想在页面加载时呈现验证码挑战。我想在用户进入一些引导模式后渲染它
@nodeofcode 不是页面onload。这是由recaptcha 提供的。我已经用示例更新了我的答案
我明白你的意思.. 但是我怎样才能将验证码渲染成不存在的块
我没有明白你的意思但是我怎样才能将验证码渲染到不存在的块中？
grecaptcha.render(, paramObj) .. 这里 somedivid 需要存在于 DOM 中，以便验证码呈现到此 div 中。现在，如果我提供 onload 查询参数，那么回调会在脚本加载后立即执行，那时我没有那个 somedivid。

【解决方案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>

【讨论】：

【解决方案3】：

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

即来自内部路径

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

到外部谷歌路径，即

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

【讨论】：

【解决方案4】：

它适用于登录页面，也适用于 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>

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我知道这是一个老问题，但也许这会对某人有所帮助。我收到此“未捕获的 ReferenceError：未定义 grecaptcha”错误的原因是我无法访问托管在 www.gstatic.com 上的依赖 js 文件 (recaptcha_en.js)。一旦我解决了这个问题，它就对我有用。

【讨论】：

链接无效
它不是作为链接，而是作为主机名。此服务器被我的网络策略阻止，这就是我遇到问题的原因。

【解决方案7】：

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

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

【讨论】：