ReCAPTCHA ajax 加载主题问题答案

【问题标题】：ReCAPTCHA ajax loaded theme problemReCAPTCHA ajax 加载主题问题
【发布时间】：2011-03-11 22:30:48
【问题描述】：

无法弄清楚如何为 ajax 加载的 recaptcha 设置主题。下面的代码不起作用。
来自Google Recaptcha

看到这篇帖子Recaptcha ajax API custom theme not working，但我肯定是在 localhost 中查看的，recaptcha 工作正常，只是没有改变主题。

有人对如何让白色主题工作有建议吗？

    <script type='text/javascript'>
        var RecaptchaOptions = {
            theme : 'white'
         };
    </script>
    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" 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>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
            function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content");
        });

    });
    </script>

【问题讨论】：

哇，我第一次发布赏金，效果很好，速度很快。发现了问题，是的，它比我想象的要简单。感谢大家的帮助。
感谢您的提问。看起来这是在互联网上使用旧的 reCaptcha v1 的一个例子。

标签： javascript jquery themes recaptcha getscript

【解决方案1】：

@jhanifen：在使用了http://wiki.recaptcha.net/index.php/Installation 的大部分代码后，我得到了它，试试这个 --

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    </head>

    <body>

    <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
            function() {
                Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", 
                "recaptcha_content",
                {
                    theme: "white", 
                    callback: Recaptcha.focus_response_field
                }
            );
        });
    });
    </script>

    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" 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>
    </div>

    </body>
</html>

【讨论】：

谢谢stealthyninja，这很好用。你或上面的答案会很棒。

【解决方案2】：

您似乎没有添加您设置的选项RecapthcaOptions。尝试更改为：

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
        function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});

See the doc's，传递给.create()方法的第三个选项是options。您正在函数外部设置一个变量来设置选项，但不要包含它们。

【讨论】：

感谢 Scoobler，是的，就是这么简单。
没问题，很高兴能帮上忙！

【解决方案3】：

首先，您的密钥无效或错误，或者您希望在此处发布：D 如果不想要。尝试获得一个新的，也许让它成为一个全球性的（可能会影响本地主机的东西）。或者在您指定的域上上传并测试代码。

这个 sn-p 适用于我的全局公钥，我直接在创建时设置主题

<html>
<head>
<title>recaptcha test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
</head>
<body>    
    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=publickey" 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>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        Recaptcha.create("publickey",
                         "recaptcha_content", {
                             theme: "white",
                             callback: Recaptcha.focus_response_field
        });
    });
    </script>   
</body>
</html>

【讨论】：

是的，在发布之前，密钥已经改变了一点。但这与我的示例不同，尽管这种方法会奏效。
我最喜欢这个解决方案，因为它只使用 jQuery 来帮助处理 onLoad。当<script src="//www.google.com/recaptcha/api/challenge?k=<key>"></script> 方法并不总是在第一次加载时，此方法也适用于 iPhone 3GS。

【解决方案4】：

按照奥卡姆剃刀的方式，你能验证设置主题的脚本是在表单元素之前。正如文档中多次指出的那样，该脚本在表单元素内部或之后不起作用。

【讨论】：