如何仅在 jQuery 对话框加载时加载 recaptcha 代码

Question

我在 jQuery 对话框中有一个验证码。

由于某种原因，当我在 Firefox 中加载页面时，它会挂起（尽管在 IE/Chrome 上效果很好）。 我发现对话框中的验证码导致了它。

我认为，如果我仅在用户打开对话框时加载验证码，则可能会解决问题，并且还可以帮助我减少一般出站连接的数量。

这是与验证码相关的位的“查看源代码”：

<div id="dialog-form" title="Create new user"> 
    <p class="validateTips">You can also Connect with Facebook</p> 
    <fb:login-button perms="publish_stream,create_event,rsvp_event,user_birthday,user_events,user_hometown,user_location,user_online_presence">Login to Facebook</fb:login-button> 
    <form id="regform" action="" method="post"> 
    <fieldset> 
        <label for="name">Username</label> 
        <input type="text" name="username" id="name" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="email">Email</label> 
        <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="password" style="float:left;">Password&nbsp;&nbsp;&nbsp;&nbsp;</label> 
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
        <input type="hidden" name="reg" value="reg" /> 
    </fieldset> 
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR"></script> 

    <noscript> 
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>     </form> 
</div> 

它放置在页面底部，标签之前，因此它不是嵌套的或任何东西。

我该怎么做呢？

谢谢，

Answer 1

如果您计划在弹出对话框中使用 reCaptcha，我强烈建议使用 javascript api< /a>.我发现 FireFox 在这种情况下处理 iframe 时可能会遇到问题。

当您收到在客户端 JavaScript 中打开对话框的调用后，您可以像这样调用创建验证码：

Recaptcha.create(YOUR_API_KEY,
    "captcha_contain",
    {
    theme: "red",
    callback: Recaptcha.focus_response_field
    }
);

其中“captcha_contain”是对话框中元素的 id，可能是一个打开的 div。
它也会稍微改变您的服务器端代码，但您可以在 API 中阅读所有相关内容。

Answer 2

此帖子表明这可能是由于 HTML 无效造成的。
在这种情况下，这是因为

被放置在 内部。
也许这也是你的情况？

无论如何，如果您确实想在对话框打开时加载验证码，则必须通过 AJAX 获取内容。
使用 jQuery UI 对话框中的 open 事件来决定何时检索验证码。
我不熟悉 reCaptcha 的 API，但也许有一个 Javascript API，否则您将不得不让 PHP 代码在单独的页面上为您呈现验证码（或以某种方式将其暴露给客户端）。

Answer 3

我在使用 reCAPTCHA 和 Firefox 3.6 时遇到了类似的问题。顺便说一句，相同的代码在 IE 和 Chrome 上运行得很好。经过多次调试（以及上面答案中的一些提示），我发现表单中的

标记导致 jquery 崩溃。

只需删除

错误就消失了。

希望它能帮助其他人。

Answer 4

我在 FF3.6 中使用灯箱时再次遇到这个问题 - 将 reCatpcha div 加载到页面中，但将其隐藏，直到表单的 onSubmit。

通过在 reCaptcha 表单上使用“可见性：隐藏”而不是“显示：无”解决了该问题。

（简单的修复，但当时很痛苦——以防万一它对其他人有用:)）