Question

我有一个页面有两个reCAPTCHA。我已经按照我发现的例子做了这样的事情：

<script>
var CaptchaCallback = function(){
    grecaptcha.render('captcha_associe-se_1', {'sitekey' : 'Key'});
    grecaptcha.render('captcha_associe-se_2', {'sitekey' : 'Key'});   
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

然后，在表格中：

    ...
    <div style="margin-left: 145px; float: left;"><div id="captcha_associe-se_1"></div></div>
</form>

和

    ...
    <div style="margin-left: 145px; float: left;"><div id="captcha_associe-se_2"></div></div>
</form>

问题是我在另一个页面中需要更多两个reCAPTCHA，但是通过添加更多render函数根本不起作用，并且没有显示错误。此外，我在控制台中有一条消息说占位符不存在，它指向CaptchaCallback内的第一行，但一切正常。

未捕获错误：ReCAPTCHA占位符元素不存在

Answer 1

通过创建另一个回调函数并在window.onload

之后加载来解决

<script>
var CaptchaCallback = function() {
    grecaptcha.render('captcha_associe-se_1', {'sitekey' : 'KEY'});
    grecaptcha.render('captcha_associe-se_2', {'sitekey' : 'KEY'});   
};

var CaptchaCallback2 = function() {
    grecaptcha.render('captcha_inscricao_1', {'sitekey' : 'KEY'});
    grecaptcha.render('captcha_inscricao_2', {'sitekey' : 'KEY'});    
};
</script>
<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
<script> window.onload = CaptchaCallback; window.onload = CaptchaCallback2; </script>

不确定是否最好，但是当我尝试在单个回调函数中添加2个以上时，似乎发生了一些愚蠢的事情，因此，只是创建了一个新的。

我不能放两个以上的reCAPTCHAs

1 个答案: