ReCaptcha CSS 未在 Meteor 中应用答案

【问题标题】：ReCaptcha CSS not applied in MeteorReCaptcha CSS 未在 Meteor 中应用
【发布时间】：2014-03-21 21:24:48
【问题描述】：

我正在尝试将 reCaptcha 插入流星模板中。

ReCaptcha 可以工作，但它没有任何 css 样式，并且未应用配置键。

我在表单前添加了配置脚本：

<script type="text/javascript">
 var RecaptchaOptions = {
     theme : 'white',
     lang : 'en'
 };
</script>

在我添加的表格中：

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU">
</script>
<noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcBoO8SAAAAAKNgu2AWLuAiqzgM0CSAywJJzCwU"
                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>

【问题讨论】：

好像其他人也遇到过这个问题：stackoverflow.com/questions/17150201/…（最后一条评论）
确保您的 javascript <script> 代码不在 <template ></template 中
感谢 Akshat 的回复。你能告诉我一个小例子（客户端和服务器端代码）如何让recaptcha在meteor中工作吗？
试图将其从模板中删除，因为它根本不显示。
试图将上面的代码及其表单容器从模板中取出，因为它根本不显示。只有当我把它放在 head 标签中时它才会出现。我认为这是因为meteor 有special 加载脚本的方式。脚本标签显示在 DOM 中，但在里面它说：重新加载页面以获取源代码：google.com/recaptcha/api/…" 在流星中使用 recaptcha 的工作示例真的很有帮助。

标签： meteor recaptcha

【解决方案1】：

我终于通过使用recaptcha AJAX API 用CSS 制作了recaptcha 节目。在 HTML 模板中，我在表单中添加了以下代码：

<div class="captcha-container">
    <div id="rendered-captcha-container"></div>
</div>

在渲染模板后，我在 client.js 文件中加载了脚本。等待脚本加载然后创建recaptcha：

Template.myTemplate.rendered = function() {
     $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js', function() {

        Recaptcha.create('add_your_public_key_here', 'rendered-captcha-container', {
            theme: 'red',
            callback: Recaptcha.focus_response_field
        });

    });    
}

【讨论】：