web-dev-qa-db-ja.com

Meteor JS：外部スクリプトを使用

コードのスニペットを提供するいくつかのサービス（FB likeやAddThisなど）があります。のように見える

<div class="service-name" data-something="x"></div>
<script type="text/javascript" src="http://service-domain.com/service-name.js"></script>

OK、クールです。通常はHTMLに貼り付けて機能します。流星ではありません。

ここに私が見るものがあります：

  • <script>テンプレート/ボディの内部ロードされていません-リソースに表示されません。Meteorの何かが実際にブラウザがJSファイルとして認識できないようにしている
  • <head>から機能します

次に、問題と質問を示します。

  1. <head>からロードしたくない-速度が理由で
  2. そこからロードしても、QAおよびPROD環境があります。 must異なるドメイン（service-domain-qa.comとservice-domain.comなど）からこのスクリプトをロードします

そして驚くべきことにcannot<head>でテンプレートヘルパー/変数を使用します。

従来のフレームワークでは、それはまったく問題ではありません。スクリプトはどこにでも含めることができ、ロードするだけです。あなたの任意の部分でロジック/変数を使用できますserverテンプレート。

それでは、Meteorでこれをどのように行うべきですか？繰り返しましょう：

  • アプリページに読み込む外部スクリプト（サードパーティドメインでホストされている）が必要です
  • このスクリプトをプロジェクトのフォルダーに保存するのはオプションではないです
  • スクリプトパスは環境に依存します（既に設定システムがあります）。それをレンダリングするテンプレートの場所には、コードからデータを渡す必要があります。

Template.createdのコード（LAB.jsまたは何でも）から動的スクリプトをロードすることでこれを達成する方法を知っていますが、これは非常にやり過ぎです...

javascriptmeteor
47
Guard

<script>本文またはテンプレート内のタグは、Meteorによって実行されるのではなく、解析され、Meteorのテンプレートシステムによって処理されます。どちらのスクリプトタグも、通常のHTMLページのように機能することを期待することはできません。

解決策は、テンプレートイベント（本文または何かに手動でscriptタグを追加できる場所）を使用するか、前述のように動的に読み込むことです。やり過ぎではありません。Meteorの仕組みです。従来のHTMLページや本文はなく、Meteor APIのみがあります。MeteorAPIは、外部スクリプトをロードして実行するには適切なAPIメソッドを使用する必要があることを指定します。

25
Rahul

私の解決策は、パッケージを使用することです。詳細については、 https://github.com/meteor/meteor/tree/master/packages/spiderable を参照してください。

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

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

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



<head><script type="text/javascript" src=""//mc.yandex.ru/metrika/watch.js""></script></head>
25
vixh

IronRouterを使用している場合、このパッケージを使用して外部sciptをロードできます。 https://github.com/DerMambo/wait-on-lib

Router.map( function () {
  this.route('codeEditor',{
    waitOn: IRLibLoader.load('https://some-external.com/javascript.js')
  });
});
11
Kuba Wyrobek

JQueryのgetscriptを使用しないのはなぜですか？

http://api.jquery.com/jquery.getscript/

コールバック関数を追加できます

8
Rune Jeppesen

yepnope のようなものを使用して、スクリプトを非同期にロードできます。これを使用して、必要なときにリーフレットをロードします。私は、yepnopeを介してより多くのスクリプトをロードすることに移行し始めているので、アプリケーションは最初のページのロードで最小限のレンダリングを行います。 yepnopeをTemplate.created内に配置します。

3
cazgp

Iframeとパブリックディレクトリを使用することは、スクリプトコードを埋め込むために使用したハックでした。これでグーグルアドワーズ広告コード用であり、私はこれを私のメインのHTMLテンプレートにしました：

<iframe src="/gads.html?v={{{unique}}}" seamless width="160" height="600"
 scrolling="no" frameborder="0" marginheight="0" marginwidth="0"
 style="margin:0;padding:0;border:none;width:160px;height:600px"></iframe>

次に、パブリックディレクトリに、次のように、google adwordsコードを含むgads.htmlファイルを配置します。

<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-54*********";
google_ad_slot = "66******";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>

それはページ上のコードを取得するために機能しましたが、それは理想からはほど遠いです（1つには、Googleの利用規約に違反していると思います）。

2
Brent Noorda

METEOR 1.0を使用しています。すべての外部SCRIPTタグを、レイアウトテンプレートのタグの直前にあるDIV要素内に配置しました。 Meteorは問題なくそれらを認識し、ブラウザによってロードされます。

1
Amir Samakar