Question

我试图在流星中加载一个推特小部件，如：

<blockquote class="twitter-tweet" lang="en"><p>&quot;Curiosity Finds Iron Meteorite on Mars&quot; <a href="http://t.co/qh6f1ITd7b">http://t.co/qh6f1ITd7b</a></p>&mdash; Daniel Fischer (@dfischer) <a href="https://twitter.com/dfischer/statuses/489240003927887872">July 16, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

但这只是以明文加载。

我尝试创建一个包：

Package.describe({
  summary: "External script"
});

Package.on_use(function (api) {
  api.use(['templating'], 'client');

  api.add_files('widget.html', 'client');
});

使用widget.html：

<head><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></head>

但没有运气。关于如何使这项工作的任何想法？

Answer 1

在你的模板中（让我们称之为widgetTemplate），应该呈现小部件，使用以下函数（try / catch只是为了安全）：

Template.widgetTemplate.rendered = function () {
    try {
        twttr.widgets.load();
    } catch (e) {}
}

同样可用于facebook小部件（分享等） - FB.XFBML.parse()

确保以头部同步或异步方式加载widgets.js.

对于异步加载，请在＆＃39; head＆＃39;中使用此代码：

<script>
    ! function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = "https://platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js, fjs);
        }
    }(document, "script", "twitter-wjs");
</script>

Answer 2

这是一种异步加载脚本并反应性地知道它何时加载或无法加载的模式。我使用下面给出的两个文件创建了一个流星项目，并且能够以适当的样式查看您的推文。

Twitter的窗口小部件-load.html：

<head>
  <title>twitter-widgets-load</title>
</head>

<body>
  {{> tweet}}
  {{> loadStatus}}
</body>

<template name="tweet">
  <blockquote class="twitter-tweet" lang="en">
    <p>&quot;Curiosity Finds Iron Meteorite on
      Mars&quot;
      <a href="http://t.co/qh6f1ITd7b">http://t.co/qh6f1ITd7b</a>
    </p>&mdash; Daniel Fischer (@dfischer)
    <a href="https://twitter.com/dfischer/statuses/489240003927887872">
      July 16, 2014</a>
  </blockquote>
</template>

<template name="loadStatus">
  {{#if SEql "twitterWidgetsLoaded" false}}
    Oh no! The Twitter Widgets library couldn't load!
  {{else}}
    {{#unless SEql "twitterWidgetsLoaded" true}}
      Loading Twitter Widgets...
    {{/unless}}
  {{/if}}
</template>

Twitter的窗口小部件-load.js：

if (Meteor.isClient) {

  var twitterWidgetsLoadedCallback = function(){
    Session.set("twitterWidgetsLoaded", true);
  }; 

  var twitterWidgetsErrorCallback = function(error){
    Session.set("twitterWidgetsLoaded", false);
    console.log(error);
  };

  //Generate a script tag
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '//platform.twitter.com/widgets.js';
  script.onload = twitterWidgetsLoadedCallback;
  script.onerror = twitterWidgetsErrorCallback;

  Meteor.startup(function () {
    //Load the script tag
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
  });

  UI.registerHelper("SEql", function (key, val) {
    return Session.equals(key, val);
  });
}

Answer 3

如果您有一个用于Iron Router布局的index.html，那么您可能希望将该脚本标记放入网站的标记中。我不是百分之百，但我认为你可以将标签放在模板中的任何地方，它们将被拼凑在一起并传送到浏览器。只要让他们住在任何标签之外。

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45XXXXXX-1', 'fantasyhub.com');
  ga('send', 'pageview');

  </script>
</head>

<template name="layout">
  <!--[if lt IE 9]>
    <p class="browser-warning"><strong><i class="icon-exclamation-sign"></i> Warning</strong> - You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to properly view this website.</p>
  <![endif]-->

  {{> yield region='header'}}
  {{> yield}}
  {{> yield region='footer'}}
</template>

这涵盖了谷歌分析等内容。另一个选择是将一些东西放入Meteor.startup，它会将脚本注入到html中。我从社交分享包shareIt：

中提取了这个内容

Meteor.startup(function() {
  var id, js, ref;
  window.twttr = (function(d, s, id) {
    var fjs, js, t;
    t = void 0;
    js = void 0;
    fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = {
      _e: [],
      ready: function(f) {
        return t._e.push(f);
      }
    });
  })(document, 'script', 'twitter-wjs');

我强烈建议您查看ShareIt package，如果您正在尝试使用Twitter和Facebook的内容，因为它会为您提供所有元标记，以支持Open Graph和Twitter Cards等开箱即用的内容。

如何在Meteor中加载Twitter小部件等外部脚本？

3 个答案: