当Bootstrap调用远程模式时，Google reCaptcha不会加载
我在第一页中定义了如下内容：
<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>这是我的第二页：(./登录-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不会被加载，这将显示：
重新加载页面以获取源：http://api.recaptcha.net/challenge.
我还注意到，在加载脚本时，状态代码为302：
有什么问题？(让您知道，如果我加载页面登录-我没有模态，reCaptcha确实显示)
这是这个项目的简化版本，你可以看看它.
回答 3
Stack Overflow用户
发布于 2014-04-28 13:45:48
问题是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.，您可以先在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将显示在模态上。
FYI，你需要核实一下表格。Verifying the User's Answer Without Plugins将是有帮助的。
Stack Overflow用户
发布于 2014-08-08 10:51:51
为了完成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");
}
});Stack Overflow用户
发布于 2014-04-22 14:09:39
我在引导模式上也有类似的问题。
您是否尝试过将模态代码直接添加到登录页面中，而不是从远程位置调用它？
我使用了导入到我的login.jsp中的jsp标记，由于一些未知的原因，它导致任何js停止工作，我仍然没有弄清楚为什么，但是把模态代码拖到页面中就为我停止了问题。
希望这能有所帮助。
https://stackoverflow.com/questions/23174979
复制相似问题
腾讯云开发者
