未捕获的错误:ReCAPTCHA占位符元素必须是元素或ID [英] Uncaught Error: ReCAPTCHA placeholder element must be an element or id

问题描述

我正在将ReCAPTCHA添加到具有多个联系表的(Bootstrap Jekyll)网站上.页脚中有一个弹出模式，偶尔有一个立即与我们联系"部分，还有几页要求有关____的更多信息".

I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.

由于我在一个页面上有多个联系表单，因此我需要显式呈现每个ReCAPTCHA.这是该代码:

Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:

在我的JavaScript中:

In my javascript:

var CaptchaCallback = function() {
    grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
    });

    grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
    });
};

在页脚中(包含在所有页面中)

In footer (included on all pages)

<div id="RecaptchaField1"></div>

(位于页脚底部)

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

这在具有两个单独的联系表单的页面上很好用(即，我在页面上有另一个带有RecaptchaField2的ID的div)，但是如果我登陆的页面只有一个联系表单，则控制台会抛出该错误错误(未捕获的错误:ReCAPTCHA占位符元素必须是元素或ID).

This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).

ReCAPTCHA似乎仍然可以工作，但是有人可以帮助我了解造成此错误的原因吗?我所做的所有研究都表明这是两次导入该库，但是我认为情况并非如此，因为问题仅出现在某些页面上，而没有出现在其他页面上.

The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.

谢谢！

推荐答案

这对我有用:

var CaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
       });
    }
};

这篇关于未捕获的错误:ReCAPTCHA占位符元素必须是元素或ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！