Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include JavaScript from a CDN in meteor?

Tags:

meteor

I'd like to include JS from a CDN in Meteor before including my own client scripts so that the client scripts can depend on it.

...
<script type="text/javascript" src="https://ajax.googleapis.com/..."></script>
...
<script type="text/javascript" src="/client/..."></script>
...

I tried including the script via *.html file and between <head> tags. But it seems that header content from *.html files will always be appended to the end of the HTML header, no matter where I place it in the file hierarchy (e.g. placing the file in a lib folder or sorting it alphabetically before client JS files won't help).

Any ideas how I could include JS from a CDN before client scripts without having to build a smart package?

like image 602
jerico Avatar asked Jan 07 '13 13:01

jerico


2 Answers

Assuming you don't need to load these files before the Meteor packages, create a JS file which is loaded before any of the others. Meteor loads files in alphabetical order so it must be the first file loaded. To that end, naming it aaLoadCDN.js should suffice. Dynamically load the CDN scripts by adding a script src element to the document head:

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');  // optional
script.setAttribute('src', 'url/to/the/cdn/script.js');
document.getElementsByTagName('head')[0].appendChild(script);

Here are some real-world Meteor packages loading scripts from CDNs:

  • snapsvg
  • Font-Awesome (CSS).
like image 149
cazgp Avatar answered Nov 03 '22 23:11

cazgp


You can append the script after the template is rendered. So your script will load only after every other line has been loaded. For example if you directly add a jquery plugin to your template html file, you'll get "jquery not found" error. But this approach prevents that:

Template.Main.onRendered(function () {

      $('head').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>');

});
like image 3
Amir Samakar Avatar answered Nov 03 '22 23:11

Amir Samakar