我正在将ReCAPTCHA添加到具有多个联系表单的(Bootstrap Jekyll)网站.页脚中有一个弹出模式,偶尔会“立即联系我们”部分,并在几个页面上“请求有关____的更多信息”.
由于我在一个页面上有多个联系表单,因此我需要显式呈现每个ReCAPTCHA.这是代码：
在我的javascript中：
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1',{'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2',{'sitekey' : 'my_sitekey'
});
};
页脚(包含在所有页面中)
<div id="RecaptchaField1"></div>
(并在页脚的底部)
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
这在有两个单独的联系表单的页面上运行良好(即我在页面上有另一个div,其ID为RecaptchaField2),但如果我登陆的页面只有一个联系表单,则控制台会抛出错误(未捕获的错误：ReCAPTCHA占位符元素必须是元素或id).
ReCAPTCHA似乎无论如何都有效,但任何人都可以帮助我理解导致此错误的原因吗？我所做的所有研究都表明它来自两次导入库,但我认为情况并非如此,因为问题只出现在某些页面而不是其他页面上.
谢谢！
解决方法
这对我有用：
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1',{'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2',{'sitekey' : 'my_sitekey'
});
}
};
