Recaptcha 2.0 错误：reCAPTCHA 占位符元素必须是元素或 id答案

【问题标题】：Recaptcha 2.0 error: reCAPTCHA placeholder element must be an element or idRecaptcha 2.0 错误：reCAPTCHA 占位符元素必须是元素或 id
【发布时间】：2020-08-19 06:26:45
【问题描述】：

我查看了我能找到的所有其他帖子，但没有一个为我解决了这个问题。我在文档头中有一个对 ReCaptcha API 的调用：

<script src="https://www.google.com/recaptcha/api.js?hl=he-IL&onload=onloadCallback&render=explicit" type="text/javascript"></script>

然后紧接着

var onloadCallback = function() {
    grecaptcha.render("recaptcha2", {
        sitekey: "6LendPIUAAAAAGQqB_2tq8fpgdGfBnEQA3v-CB0g",
        theme: "light"
    });
};

我在控制台中收到以下错误：

recaptcha__iw.js:60 Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
    at mv (recaptcha__iw.js:60)
    at Object.render (mootools-core.js:88)
    at onloadCallback (register:56)

这是我的实时页面： https://www.tofesyashir.co.il/register

我已尝试更改顺序。我尝试将异步延迟添加到我的脚本调用中，但没有任何帮助。

另外，非常奇怪的是，如果我手动调用 grecaptcha.render，则会再次触发错误，即使我在页面中 100% 存在的 ID 上使用它。由于某种原因，它根本不会在任何 div 上呈现。

你们觉得呢？

【问题讨论】：

是不是oyu你的HTML文档有语法错误，导致DOM无效，无法正确解析，导致ID无法正确识别？
另外，除了您的实时页面之外，您能否提供一个最小的工作示例来重现错误？
@JohannesH。这个页面大约在 2 周前运行良好，所以我认为无效的 DOM 没有意义。另外，这不会影响其他javascript函数吗？我无法在一个最小的工作示例中重现该错误，因此问题:)
我明白了。我只是测试了一些东西。有趣的是，document.getElementById(recaptcha2) 工作得很好，但 grecaptcha.render(document.body, {}) 不起作用——尽管 body 是一个现有的元素。不过我有一个答案，我会写在下面。

标签： javascript html forms dom recaptcha

【解决方案1】：

查看你得到的异常的堆栈跟踪，实际调用的 .render() 方法来自 mootools：

Uncaught (in promise) Error: reCAPTCHA placeholder element must be an element or id
    at mv (recaptcha__iw.js:60)
    at Object.render (mootools-core.js:88)
    at onloadCallback (register:56)

由于您使用的 mootools 被缩小，我无法确定它到底哪里出了问题。但是，在我看来，好像在该方法中完成了某些参数重新绑定，并且可能这会导致在以任何方式最终调用 reCaptcha 方法时将其他内容分配给第一个 apremeter。

所以我尝试在本地副本中从您的网页中删除 mootools - 它确实解决了问题，reCaptcha 可以在 mootools 消失的情况下正常工作。

还有一个未解决的错误报告：https://github.com/google/recaptcha/issues/376。那里提供的链接指向相关问题中发布的解决方案：手动更新 mootools 似乎可以解决问题。

【讨论】：

太棒了！感谢您的帮助！我将 mootools 升级到最新版本 1.6（按照您提供的链接中的建议），问题已解决。