未捕获的ReferenceError:未定义grecaptcha

Question

我正在使用recaptchav2

我偶尔会收到以下错误(有时候我没有得到错误,有时候我会得到它)

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>