web-dev-qa-db-fra.com

Meteor JS: utiliser un script externe

Il existe certains services (comme FB like ou AddThis) qui fournissent un extrait de code. On dirait

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

OK, cool, donc normalement vous le collez dans votre code HTML et cela fonctionne. Pas avec Meteor.

Voici ce que je vois:

  • <script> à l'intérieur du modèle/corps ne se charge pas - Je ne le vois pas dans les ressources, quelque chose dans Meteor empêche en fait le navigateur de le reconnaître comme un fichier JS
  • cela fonctionne à partir de <head>

Voici maintenant les problèmes et les questions:

  1. Je ne veux pas le charger depuis <head> - à cause de la vitesse
  2. Même si je le charge à partir de là - nous avons des environnements QA et PROD. Ils doivent charger ce script à partir de différents domaines (comme service-domain-qa.com vs service-domain.com)

Et étonnamment, vous ne pouvez pas utiliser des assistants/variables de modèle dans le <head>.

Avec les frameworks traditionnels, ce n'est pas du tout une question - vous pouvez inclure des scripts n'importe où et ils se chargent simplement; vous pouvez utiliser la logique/les variables dans n'importe quelle partie de vous modèles de serveur .

Alors, comment dois-je faire cela dans Meteor? Permettez-moi de répéter:

  • J'ai besoin de quelques scripts externes (hébergés sur un domaine tiers) à charger dans ma page d'application
  • Enregistrer ce script dans le dossier de mon projet est pas une option
  • Le chemin du script dépend de l'environnement (nous avons déjà le système de paramètres), donc la place du modèle qui le rend devrait être passée quelques données du code

Je connais le moyen d'y parvenir avec le chargement de script dynamique à partir de mon code (avec LAB.js ou autre) sur Template.created, mais c'est tellement exagéré ...

javascriptmeteor
47
Guard

<script> les balises dans le corps ou les modèles ne sont pas exécutées par Meteor, elles sont analysées puis gérées par le système de modèles de Meteor. Vous ne pouvez pas vous attendre à ce qu'une balise de script dans l'une d'elles fonctionne comme elle le ferait avec une page HTML normale.

La solution consiste à utiliser des événements de modèle (où vous pouvez ajouter manuellement la balise de script au corps ou à quelque chose) ou à le charger dynamiquement comme vous l'avez dit. Ce n'est pas exagéré, c'est comment Meteor fonctionne - rappelez-vous, il n'y a pas de page ou de corps HTML traditionnel, il n'y a que l'API Meteor, et l'API Meteor spécifie que pour charger et exécuter des scripts externes, vous devez utiliser les méthodes d'API appropriées.

25
Rahul

Ma solution est d'utiliser des packages. Voir https://github.com/meteor/meteor/tree/master/packages/spiderable pour plus de détails.

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

Si vous utilisez IronRouter, vous pouvez charger un scipt externe en utilisant ce package: 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

Pourquoi ne pas utiliser le script de jQuery?

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

Vous pouvez ajouter une fonction de rappel

8
Rune Jeppesen

Vous pouvez utiliser quelque chose comme yepnope pour charger le script de manière asynchrone. Je l'utilise pour charger la brochure au fur et à mesure de mes besoins. Je commence à charger plus de scripts via yepnope, afin que mon application affiche le strict minimum lors du chargement initial de la page. Je place le truc yepnope dans Template.created.

3
cazgp

Utiliser iframe et le répertoire public était un hack que j'ai utilisé pour intégrer le code du script. Dans ce cas, c'était pour le code google adwords et j'ai fait cela mon principal modèle 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>

puis dans le répertoire public, mettez un fichier gads.html avec mon code google adwords, comme ceci:

<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>

cela a fonctionné pour obtenir le code sur la page, bien qu'il soit loin d'être idéal (d'une part, je pense que cela viole les conditions d'utilisation de google).

2
Brent Noorda

J'utilise METEOR 1.0. J'ai placé toutes les balises SCRIPT externes dans un élément DIV juste avant la balise dans le modèle de mise en page. Meteor les reconnaît sans aucun problème et ils sont chargés par le navigateur.

1
Amir Samakar