在 Meteor 应用程序中使用 Disqus / reCaptcha答案

【问题标题】：Using Disqus / reCaptcha in a Meteor Application在 Meteor 应用程序中使用 Disqus / reCaptcha
【发布时间】：2013-06-13 13:33:53
【问题描述】：

我正在使用 Meteor 开发一个应用程序。我正在尝试在我的一个表单上使用 reCaptcha，并在我的某些页面上使用 Disqus cmets 系统。但问题是，当我运行流星服务器时，这些都没有呈现。

这是我添加到模板中的示例 Disqus 代码：

<script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'HIDDENfromstackoverflow'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

为此，网页上仅显示“cmets powered by Disqus”文字。

对于验证码：

  <noscript>
     <iframe src="http://www.google.com/recaptcha/api/noscript?k=HiddenFromStackOverflow"
         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>

有趣的是，如果我在浏览器中将模板作为普通 HTML 文件打开（而不是通过 Meteor 服务器），则会显示 reCaptcha。

我错过了什么？

【问题讨论】：

我认为将js脚本放入模板不是一个好主意。放入head标签中。
但 disqus 和验证码需要将脚本放置在您希望它们显示的位置。
@Siddharh Gupta：你确定元素在你网站的 DOM 中吗？尝试使用一些网络检查器（firefox 中的 firebug 等）并查看元素是否真的在 DOM 中或流星是否忽略它们

标签： javascript meteor recaptcha disqus meteorite

【解决方案1】：

您需要为此包含 jquery。

public/disqus.js

 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'HIDDENfromstackoverflow'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

app.html

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
</head>

<body>
{{>captcha}}
</body>

<template name="captcha">
    {{#isolate}}
     <div id="my-disqus">
        <div id="disqus_thread"></div>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> 
    </div>
    {{/isolate}}
</template>

client/main.js

Meteor.startup (function () {

    $(function () {
        var el = document.createElement("script");
        el.src = "/disqus.js";
        el.type = 'text/javascript';
        $("#my-disqus").prepend(el);

    });

});

【讨论】：

谢谢！ disqus 小部件现在可以工作了。但是如何让 reCaptcha 工作呢？
@SiddharthGupta：我认为它应该可以正常工作，只需删除该 noscript，因为只有在禁用 javascript 时才会呈现该标签的主体，如果您使用的是流星，那真的很有用：D
它现在可以工作了，但是没有样式。看起来很简单，但至少它有效！谢谢！ :)