Uncaught Error: ReCAPTCHA placeholder element must be an element or id

Question

我正在将 ReCAPTCHA 添加到 (Bootstrap Jekyll) 网站，该网站有多个联系表单。页脚中有一个弹出模式，偶尔有一个 "contact us now" 部分，还有几个页面上有一个 "request more information about ____"。

由于我在单个页面上有多个联系表单，因此我需要显式呈现每个 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 似乎仍然有效，但谁能帮助我了解导致此错误的原因？我所做的所有研究表明它来自两次导入库，但我假设情况并非如此，因为问题只出现在某些页面上而不是其他页面上。

谢谢！

Answer 1

这对我有用：

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

Answer 2

我遇到了同样的问题，这个解决方案对我不起作用，但我找到了一个。

事实是我使用了插件wordpress Contact form 7，不幸的是，我在集成部分写了recaptcha的密钥。

这使得函数 recaptcha/api.js 被调用了两次并产生了这个错误。

所以我刚刚删除了插件并重新安装它而没有填充集成部分，并在文件 header.php 和 footer.php 中调用了 recatpcha 并且有效:)

并且不要忘记将重新验证按钮放在联系表中

<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>

Answer 3

您也可以在纯 java 脚本方式中使用它

grecaptcha.render(document.getElementById('RecaptchaField1'), {
      'sitekey' : 'my_sitekey'
    });