当引导调用远程模式时，不会加载java Google reCaptcha

Question

我在第一页中定义了如下内容：

<span class="btn btn-default"> <a data-toggle="modal"
        id="fillTheFormHiddenInput" data-target="#login-modal" href="login-i">sign in</a>
</span>

在第一页的末尾：

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

这是我的第二页：（…/login-i）

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="net.tanesha.recaptcha.ReCaptcha" %>
<%@ page import="net.tanesha.recaptcha.ReCaptchaFactory" %>
<div class="modal-dialog" style="width: 350px !important;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
            <h4 class="modal-title">Login to Dashboard</h4>
        </div>

        <form:form role="form" method="post" commandName="userCredential">
            <div class="modal-body border-top-less">

                <form:errors cssClass="" path="*" element="div" />

                <form:input path="username" class="form-control"
                    placeholder="Your username" id="inputUsername1" />
                <br />

                <form:password path="password" class="form-control"
                    placeholder="Your Password" id="inputPassword1" />
                <div>
                <%
                    ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LdoF_ISAAAAAH3dYUqRZvpCwPCyH4lfBxdLy_a3", "6LdoF_ISAAAAAGxauxkNaSjv3DTBRmEvawWaklo_", false);
                        out.print(c.createRecaptchaHtml(null, null));
                %>
                </div>

                <br />
                <div class="form-group">
                    <button type="submit" class="btn btn-default btn-block">sign
                        in</button>
                </div>

                <div class="form-group text-center">
                    <a href="${routePath}signup">Sign Up Now !!</a>
                </div>



            </div>
        </form:form>

    </div>
</div>

实际上我用这种方式调用远程模式。但当我点击登录按钮时，reCaptcha不会被加载，这将显示：

Reload the page to get source for: http://api.recaptcha.net/challenge...

我还注意到，在加载脚本时，状态代码是302：

有什么问题吗？？？（让您知道，如果我在没有模式的情况下加载页面login-I，reCaptcha确实会显示出来）

---

这是这个项目的简化版本，你可以看看

https://app.box.com/s/zduxdiafwzmsw2u6eqm7

Answer 1

问题是recaptcha代码使用document.write()方法运行。调用ajax时，由于ajax的原因，无法使用该方法。例如，模式中的data-remote在内部使用ajax

如果你在chrome上运行代码，你可以看到下面的警告

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

谷歌提供other way of recaptcha for solving the problem.你可以先在^{中添加脚本

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

然后，替换login.jsp中的代码

<%
  ReCaptcha c = ReCaptchaFactory.newReCaptcha("YOUR_API_KEY", "YOUR_TOKEN", false);
  out.print(c.createRecaptchaHtml(null, null));
%>

去

<div id="recaptcha"></div>
<script>
  Recaptcha.create("YOUR_API_KEY",   // update with your api key
    "recaptcha",
    {
      theme: "red",
      callback: Recaptcha.focus_response_field
    }
  );
</script>

就这些。ReCaptcha将在modal上显示

仅供参考，你需要核实一下表格Verifying the User's Answer Without Plugins会有帮助

Answer 2

为了完成Edward令人敬畏的回答，如果您正在使用远程内容的modals或任何复杂的异步行为，我保证在创建Recaptcha之前已经加载了外部脚本

$.getScript("https://www.google.com/recaptcha/api/js/recaptcha_ajax.js",function(){
  if(typeof Recaptcha != "undefined"){            
     Recaptcha.create("YOUR_API_KEY",  "recaptchaDiv", {
       theme: "red",
       callback: Recaptcha.focus_response_field
     });
  }
  else {
     alert("recaptcha not loaded");
  } 
});

Answer 3

我对引导模式也有类似的问题

您是否尝试过直接将模式代码添加到登录页面中，而不是从远程位置调用它

我使用的是一个jsp标记，我把它导入了我的登录名中。由于一些未知的原因，它导致任何js停止工作，我仍然不知道为什么，但将模式代码拉到页面中对我来说就停止了这个问题

希望有帮助