不可见的 reCaptcha iframe 不显示，表格卡住

Question

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

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

其中 my_site.js 看起来像这样：

... many other functions, not nested

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

... other functions

然后在我的表单中使用：

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

每当我按下按钮时，会出现白色 half-transparent 覆盖空白 div，但什么也没有发生（控制台消息没有出现）并且表单卡住了。

我正在使用最新的Chrome。

提前致谢

Answer 1

你没有渲染验证码。

一旦用户通过向 data-callback 上指定的函数发送回调来完成验证码，提交按钮将尝试验证验证码的响应。由于您尚未创建组件，它会陷入循环。

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

而不是：

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

渲染如下：

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

2. 将其包装在一个表单中。你已经有了，修改一下就可以了

因为您指定了 运行 验证码完成后的功能，所以您无需担心提交按钮。

结构应如下所示：

    <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>

另外一定要查看文档 ;)

https://developers.google.com/recaptcha/docs/display

Answer 2

我怀疑该元素超出了可见范围。那么您可以尝试将 data-badge="inline" 添加到 html

中的 recaptcha 元素吗

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

希望对您有所帮助。

Answer 3

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

div { overflow: hidden; }

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

删除此设置解决了问题。