Javascript reCAPTCHA AJAX API在Safari的模式对话框中工作不一致
我通过其AJAX API使用reCAPTCHA在模式对话框中显示验证码。我使用jqModal来显示这些框,我使用的是reCAPTCHA的AJAX版本,因为PHP版本已经存在jqModal的缺陷(一个已知的缺陷:) 现在,reCAPTCHA在Firefox中运行良好。但在Safari中,它并不总是显示出来。有时,它可以正常工作,但在大约20%的情况下,不会显示reCAPTCHA框 jqModal声明如下所示:Javascript reCAPTCHA AJAX API在Safari的模式对话框中工作不一致,javascript,ajax,safari,recaptcha,jqmodal,Javascript,Ajax,Safari,Recaptcha,Jqmodal,我通过其AJAX API使用reCAPTCHA在模式对话框中显示验证码。我使用jqModal来显示这些框,我使用的是reCAPTCHA的AJAX版本,因为PHP版本已经存在jqModal的缺陷(一个已知的缺陷:) 现在,reCAPTCHA在Firefox中运行良好。但在Safari中,它并不总是显示出来。有时,它可以正常工作,但在大约20%的情况下,不会显示reCAPTCHA框 jqModal声明如下所示: $().ready(function() { $('#modalBox_regist
$().ready(function() {
$('#modalBox_register').jqm({
ajax: '/modals/register.php',
trigger: 'a#registerButtonLink',
onShow: function(h) {
h.w.css('opacity', 1.00).fadeIn(300);
},
onHide: function(h) {
h.w.fadeOut(300, function() { if (h.o) h.o.remove(); });
}
});
});
<div id="registerModal">
<p class="caption">Registration form:</p>
<form name="registerForm" id="modalRegisterForm" class="modalForm" action="/register/" method="post">
<table cellspacing="15" border="0">
<tr>
<td class="left"><label for="firstName">First Name:</label></td>
<td class="right"><input type="text" name="firstName" id="firstName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="lastName">Last Name:</label></td>
<td class="right"><input type="text" name="lastName" id="lastName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="email">Email Address:</label></td>
<td class="right"><input type="text" name="email" id="email" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="password">Password:</label></td>
<td class="right"><input type="password" name="password" id="password" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="passwordConfirm">Confirm Your Password:</label></td>
<td class="right"><input type="password" name="passwordConfirm" id="passwordConfirm" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms"> I have read and accept the <a href="/backmatter/termsofuse/">Terms of Use.</a><br /></label>
</div><!-- /#termswrap --></td>
</tr>
<!-- reCAPTCHA -->
<tr>
<td class="left"><label for="captcha">Are you human?</label></td>
<td class="right"><!-- Using the reCAPTCHA AJAX API, because the non-AJAX API is buggy with jqModal -->
<div id="recaptcha_div"></div>
<script type="text/javascript"
src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> <script
type="text/javascript">
Recaptcha.create("123456789...",
"recaptcha_div", {
theme: "white"
});
</script>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><input type="image" id="submitButton" src="/images/modals/button_register.png" value="Submit" alt="Submit" name="submit" /></td>
</tr>
</table>
</form>
</div><!--/#registerModal-->
模式框中的HTML/PHP如下所示:
$().ready(function() {
$('#modalBox_register').jqm({
ajax: '/modals/register.php',
trigger: 'a#registerButtonLink',
onShow: function(h) {
h.w.css('opacity', 1.00).fadeIn(300);
},
onHide: function(h) {
h.w.fadeOut(300, function() { if (h.o) h.o.remove(); });
}
});
});
<div id="registerModal">
<p class="caption">Registration form:</p>
<form name="registerForm" id="modalRegisterForm" class="modalForm" action="/register/" method="post">
<table cellspacing="15" border="0">
<tr>
<td class="left"><label for="firstName">First Name:</label></td>
<td class="right"><input type="text" name="firstName" id="firstName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="lastName">Last Name:</label></td>
<td class="right"><input type="text" name="lastName" id="lastName" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="email">Email Address:</label></td>
<td class="right"><input type="text" name="email" id="email" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="password">Password:</label></td>
<td class="right"><input type="password" name="password" id="password" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"><label for="passwordConfirm">Confirm Your Password:</label></td>
<td class="right"><input type="password" name="passwordConfirm" id="passwordConfirm" value="" class="registerModalTextField" /></td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms"> I have read and accept the <a href="/backmatter/termsofuse/">Terms of Use.</a><br /></label>
</div><!-- /#termswrap --></td>
</tr>
<!-- reCAPTCHA -->
<tr>
<td class="left"><label for="captcha">Are you human?</label></td>
<td class="right"><!-- Using the reCAPTCHA AJAX API, because the non-AJAX API is buggy with jqModal -->
<div id="recaptcha_div"></div>
<script type="text/javascript"
src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script> <script
type="text/javascript">
Recaptcha.create("123456789...",
"recaptcha_div", {
theme: "white"
});
</script>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"><input type="image" id="submitButton" src="/images/modals/button_register.png" value="Submit" alt="Submit" name="submit" /></td>
</tr>
</table>
</form>
</div><!--/#registerModal-->
你是人类吗?
Recaptcha.创建(“123456789…”,
"重演沙乌分区",{
主题:“白色”
});
名字:
姓氏:
电邮地址:
密码:
确认您的密码:
我已经阅读并接受了
有人知道为什么reCAPTCHA AJAX调用在Safari中不能正常工作吗?我认为Safari在重新呈现标记时会重新执行javascript。当对话框打开时,模式对话框中的任何内容都会重新呈现。此外,我怀疑在重新呈现后,recaptcha使用的document.write会对它的位置感到困惑,并将其弄得一团糟。无论如何,以下是解决我问题的方法:
$(“#验证码表单脚本”).remove()代码>
“验证码表单”是包含验证码的表单的id。删除脚本标记,以便在jQuery移动脚本后,Safari重新呈现脚本时不会再次执行脚本。脚本创建的事件处理程序不在脚本标记中,因此它们仍然存在。我认为Safari在重新呈现标记时会重新执行javascript。当对话框打开时,模式对话框中的任何内容都会重新呈现。此外,我怀疑在重新呈现后,recaptcha使用的document.write会对它的位置感到困惑,并将其弄得一团糟。无论如何,以下是解决我问题的方法:
$(“#验证码表单脚本”).remove()代码>
“验证码表单”是包含验证码的表单的id。删除脚本标记,以便在jQuery移动脚本后,Safari重新呈现脚本时不会再次执行脚本。脚本创建的事件处理程序不在脚本标记中,因此它们仍然存在。在safari中会得到什么结果?代码是否在主机中,以便我检查?我不知道这是否相关,但safari和其他基于webkit的浏览器无法显示AJAX加载文件中定义的样式,因此必须将样式加载到通过AJAX加载辅助页面的主页面中。在safari中会得到什么结果?代码是否在主机中,以便我检查?我不知道这是否相关,但safari和其他基于webkit的浏览器无法显示AJAX加载文件中定义的样式,因此必须将样式加载到通过AJAX加载辅助页面的主页面中。