我在第一页中定义了这样的内容:
<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">×</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:
这是什么问题??? (让你知道我是否在没有模态的情况下加载页面登录-i reCaptcha 确实显示)
这里是项目的简化版,大家可以看看...
最佳答案
问题是 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.
Google 提供 other way of recaptcha for solving the problem.您可以先在 index.jsp
中添加脚本。
<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 将显示在模态上。
仅供引用,您需要验证表格。 Verifying the User's Answer Without Plugins会有帮助。
关于java - 当 Bootstrap 调用远程模式时,Google reCaptcha 不会加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23174979/