Javascript 不可见的reCaptcha iframe未显示，窗体被卡住

我正在我的网站上加载两个脚本：

<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>

然后在我的表格中，我使用：

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

发送

每当我按下按钮时，一个白色的半透明覆盖的空div就会出现，但是什么也没有发生（控制台消息没有出现），表单就会被卡住

我正在使用最新的Chrome浏览器

---

提前感谢

您没有提供验证码。

提交按钮试图在用户完成验证码后通过向

数据回调

中指定的函数发送回调来验证验证码的响应。由于您尚未创建组件，它会陷入循环中

提交按钮不能与加载验证码的标签相同。您需要在空标记中呈现验证码

而不是：

发送

将其渲染为：

把它包在一个表格里。您已经拥有它，所以只需修改它即可

由于您正在指定验证码完成后要运行的函数，因此无需担心submit按钮

结构应如下所示：

... many other functions, not nested

function captachaCallback() {
    console.log("Captcha");
}

... other functions

///表单中的其他元素
/// ...

还要确保查阅文档；）

---

我怀疑该元素正在消失。因此，您可以尝试将

data-badge=“inline”

添加到html中的recaptcha元素中吗

发送

---

希望这有帮助。

问题是我的CSS设置影响了我网站上的所有div

div { overflow: hidden; }

显然，这使得带有验证码测试的弹出窗口不可见

---

删除此设置解决了问题。

在另一个标记上应用

数据站点密钥

属性，该标记将包含验证码。不要将提交按钮与catcha容器合并。谢谢，但我说的是看不见的recaptcha。我的代码实际上完全符合上一篇文章中的例子，这不是问题所在，但它帮助我解决了问题。谢谢。我很高兴这有帮助。：-）我也有同样的问题兄弟谢谢

    <div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>

    <form action="?" method="POST">
      /// The other elements in your form
      /// ...
      <div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
      <br/>
      <input id="btnSubmit" type="submit" value="Submit">
    </form>

div { overflow: hidden; }