Meteor loading external scripts conditionally

Question

I'm trying to make a multi-page Meteor app (I'm using https://github.com/tmeasday/meteor-router). How do I conditionally load javascripts depending on the page content?

This is what I'm doing: the main page main.html has a {{renderPage}} within the <body> tag which is what the Meteor-router use. Say there is this page/template called home which is one of the pages and it has some of it's scripts. If it were not for Meteor some of these scripts are in <header> such as jquery, while others are at the end of <body>. I put a partial at the end of the home template called homeCustomScripts and it has a corresponding Template.homeCustomScripts function like so (I left-out many scripts, this is just an example):

Template.homeCustomScripts.created = function() {
  scriptInsert = function () {
    $('head').append('<script type="text/javascript" src="js-plugin/respond/respond.min.js">`
    <script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>`
    <script type="text/javascript" src="js/custom.js"></script>');

  }
}

Within main.html I have another partial called customScript and I have inside Template.customScript.rendered calls scriptInsert().

It should work, except that there are some really messy Javascript error at the Chrome console which I've no idea what it means:

enter image description here

I'm guessing that because Meteor also loads JQuery in <head> and I heard that Meteor is loading everything in there last, so maybe the JQuery plugin easing is loaded before that instance of JQuery. But I don't know.

What's the best way to load different script for different page in a multi-page application in Meteor?

nate-strauser nate-strauser · Accepted Answer · 2013-06-03T15:50:02

your code is loading the scripts multiple times - each time the template is rendered (this almost always happens many times even for simple pages) - you are injecting the same code over and over which is likely causing the errors

i'm not sure i would engage in this patten - based on how meteor works even with multi-page apps using meteor-router (the page never reloads) you should just include your javascript files in your app directory and have them already loaded via 1 combined and minified javascript file - you may need to place your files in the client/compatibility directory to circumvent any scoping issues see https://github.com/meteor/meteor/blob/master/History.md

if your files are truly already inside your app directory, they are already loaded and this is not needed at all - by default meteor will load and serve everything to the browser in any directory except server or tests

this could make a little more sense if you were loading external scripts, in which case you should use the router filters to accomplish this

Meteor.Router.filters({
  'isCustomScriptLoaded': function(page) {
    if(!Session.equals('isCustomScriptLoaded', true)){
        Session.set('isCustomScriptLoaded', true);
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = "<EXTERNAL SCRIPT URL>";

        var firstScript = document.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(script, firstScript);
    }
  }
});

Meteor.Router.filter('isCustomScriptLoaded',{only: ['pageThatNeedsCustomScript'] });

that would load the script as needed and keep it loaded - you want to only load it once, not each time the page is loaded or even worse rendered

loading scripts in this way may still be problematic - if the page renders for the last time before the script is loaded it might not work correctly - your best bet is to include all needed files right away

Meteor loading external scripts conditionally

1 Answers