Best IT Recipes

Meteor JS: use an external script

There are some services (such as FB or AddThis) that provide a piece of code. He looks like

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

OK, cool, so usually you embed it in your HTML and it works. Not with the Meteor.

Here is what I see:

  • <script> inside the template / body does not load - I do not see it in resources, something in Meteor actually does not allow the browser to recognize it as a JS file
  • powered by <head>

Now here are the problems and questions:

  • I don’t want to load it from <head> - because of speed
  • Even if I download it from there, we have QA and PROD environments. They should download this script from different domains (for example, service-domain-qa.com vs. service-domain.com).

And surprisingly, it cannot use helpers / template variables in <head> .

With traditional frameworks, this is not a question - you can include scripts anywhere, and they just load; You can use logic / variables in any part of your server templates.

So how do I do this in Meteor? Let me repeat:

  • I need external scripts (hosted on a third-party domain) to be uploaded to my application page.
  • Saving this script in my project folder is not an option
  • The script path depends on the environment (we already have a settings system), so the place of the template that displays it must be transferred with some data from the code

I know a way to achieve this with dynamically loading a script from my code (using LAB.js or something else) to Template.created, but this is too much ...

+45
javascript meteor
Jan 17 '13 at 23:02
source share
7 answers
tags in the body or templates are not executed by Meteor, they are analyzed and then processed by the Meteor template system. You cannot expect a script tag in any of them to just work as you would with a regular HTML page.

The solution is to use Template events (where you could manually add the script tag to the body or something else) or load it dynamically, as you said. This does not overwhelm the way Meteor works - remember that there is no traditional HTML page or body, there is only the Meteor API, and the Meteor API indicates that you must use the appropriate API methods to load and execute external scripts.

+24
Jan 17 '13 at 23:10
source share

My solution is to use packages. See https://github.com/meteor/meteor/tree/master/packages/spiderable for more details.

 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>
+23
Jul 6 '13 at 19:27
source share

If you use IronRouter, you can download an external script using this package: https://github.com/DerMambo/wait-on-lib

 Router.map( function () { this.route('codeEditor',{ waitOn: IRLibLoader.load('https://some-external.com/javascript.js') }); });
+10
Nov 06
source share

Why not use jquery props?

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

You can add callback function

+8
Jan 06 '14 at 8:13
source share

You can use something like yepnope to asynchronously load a script. I use this to download flyers when and when I need to. I am starting to move on to loading more scripts through yepnope, so that my application does the minimum minimum on the initial page load. I put yepnope stuff inside Template.created.

+3
Feb 14 '13 at 1:48
source share

Using an iframe and a public directory was a hack that I used to enter script code. This was it for google adwords code, and I made this basic html template:

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

and then in the public directory place the gads.html file with my Google AdWords code, for example:

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

which worked to get the code on the page, although it is far from ideal (firstly, I believe that this violates the terms of service of Google).

+2
May 20 '13 at 19:07
source share

I am using METEOR 1.0. I put all the external SCRIPT tags inside the DIV element right before the tag in the layout template. Meteor recognizes them without any problems, and they are downloaded by the browser.

+1
Dec 31 '15 at 16:25
source share


More articles:


All Articles