Search code examples
htmlmeteorhead

meteor - change contents of HTML <head> section for different templates?


I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.

I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.

Can I do this with four different Meteor templates?


Solution

  • The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:

    Template.templateName.onRendered(function() {
      $('head').append("insert your script here");
    });
    

    So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.