Javascript 未捕获引用错误：未定义grecaptcha

我正在使用

recaptcha

v2

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

这似乎是因为内部http请求。这需要一些时间才能获得另一个js

recaptcha\uu en.js

。同时执行

grecaptcha

的实际渲染代码

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

---

PS：当然，我正在寻找一些解决方案，而不是

setTimeout

Recaptcha有一个

onload

回调，它将在加载Recaptcha后运行。将代码放在回调函数中

函数onloadCallback（）{
/*将您的recaptcha呈现代码放在此处*/
}

我通过以下方式对脚本进行排序，解决了这个问题

HTML

jQuery

var review_recaptcha_小部件；
var onloadCallback=函数（）{
如果（$（'u#review_recaptcha'）。长度）{
review\u recaptcha\u widget=grecaptcha.render（'review\u recaptcha'{
“sitekey”：”
});
}
};      

通过对脚本代码进行以下更改（：

i、 从内部路径删除

到外部谷歌路径，即

---

有时应用程序会多次加载脚本

'https://www.google.com/recaptcha/api.js

刷新后，确保您的应用程序没有多个

它在登录页和引导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>

var interval=setInterval（函数（）{
如果（window.grecaptcha）{
grecaptcha.ready（函数（）{
执行（'ADD-YOUR-RECAPTCHA-SITE-KEY-HERE'，{action:'homepage'}）。然后（函数（令牌）{
$（“#i-recaptcha”）。前缀（“”）；
});
});
间隔时间；
}
}, 100);

---

谢谢你问这个问题。

我知道这是一个老问题，但也许这会对某人有所帮助。我之所以收到这个“未捕获引用错误：未定义grecaptcha”错误，是因为我无法访问托管在上的依赖项js文件（recaptcha_en.js）。一旦我解决了这个问题，它就对我起了作用。

但我希望不在页面加载上呈现验证码挑战。我想在用户进入一些引导程序后渲染它modal@nodeofcode它不是页面

onload

。这是由recaptcha提供的。我已经用例子更新了我的答案。我确实明白你的意思。。但是我怎么能把captcha渲染成不存在的块呢我不明白你的意思，但是我怎么能把captcha渲染成不存在的块呢。。这里somedivid需要存在于DOM中，以便captcha呈现到这个div中。现在，如果我提供onload query param，那么回调会在脚本加载后立即执行，而当时我没有somedivid.link无效。它不是作为链接，而是作为主机名。此服务器被我的网络策略阻止，这是导致我出现问题的原因。

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

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

<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>

<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>