Invisible reCaptcha iframe不显示，卡住了形式

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。Itay想要引起更多关注对此问题。

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

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

[每当我按下按钮时，都会出现一个白色的半透明覆盖的空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