未捕获的ReferenceError：未定义grecaptcha

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

如果语言对你有用，你可以在调用api时设置hl=en变量！

因此：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en"></script>

Answer 4

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

即从内部路径

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

到外部谷歌路径，即

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

Answer 5

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