Google"reCaptcha"有时无法显示/呈现

Question

有时我必须多次重新加载网页,直到reCaptcha被渲染.我和一位朋友在Firefox和Chrome上都进行过测试,但问题是一致的,似乎并不依赖于使用过的浏览器.

我用来显示我的reCaptcha的代码:

 <script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

<script>
        var CaptchaCallback = function(){
            grecaptcha.render('RecaptchaField1', {'sitekey' : '6LdbWAo..'});
            grecaptcha.render('RecaptchaField2', {'sitekey' : '6LfAVAo..'});
            grecaptcha.render('RecaptchaField3', {'sitekey' : '6LfqWwo..'});
            grecaptcha.render('RecaptchaField4', {'sitekey' : '6Lf4sAo..'});
        };

后来在我刚刚添加的表格中:<div id="RecaptchaField1"></div>使用正确的数字.

如果关心的话,表格总是在bootstrap模式中？

编辑: 我删除了async和defer属性.

编辑2: 有问题的页面:http://www.dexquote.com

Answer 1

当我在隐藏的div(例如模态)上初始化地图时,谷歌地图中出现了这个问题.我通过从页面加载中删除初始化来解决这个问题,并在显示模式时初始化每个验证码:

$(document).ready(function () {
    $('#loginModal').on('shown.bs.modal', function () {
        grecaptcha.render('RecaptchaField1', {'sitekey': '6LdbWAoTAAAAAPvS9AaUUAnT7-UKQMxz6vY4nonV'});
    })
    $('#loginModal').on('hide.bs.modal', function () {
        $("#RecaptchaField1").empty();
    })
});

Answer 2

如果您的单页存在此问题，请从 recaptcha 脚本加载中删除“defer async”，并将“defer”放在回调函数上。

您遇到问题的原因是加载远程脚本比加载其他本地脚本持续时间更长，因此您的渲染函数在 grecaptcha 完全加载之前被调用。当您从远程脚本中删除 defer async 并将 defer 放在回调上时，grecaptcha 将在页面加载过程中加载，并且它将调用回调函数，该回调函数将在页面完全加载后触发，因此如果您没有其他“defer”标记的脚本, grecaptcha.render() 将是该页面上要做的最后一件事。

代码如下所示：

<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit'></script>

<script defer>
        var CaptchaCallback = function(){
            grecaptcha.render('htmlElementId', {'sitekey' : 'yourSiteKey'});
        };
</script>