最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Meteor load scripts, CSS specific to pages - Stack Overflow

programmeradmin0浏览0评论

The problem I'm currently experiencing is, that I want to be able to execute only specific scripts and CSS files, because if executed on a wrong page, it produces errors in the browser console.

I'm using "Iron router" for Meteor with only the basic code to make it work. Now, is there a way for me to send scripts as parameters, so it only loads the ones I want the page to load?

The problem I'm currently experiencing is, that I want to be able to execute only specific scripts and CSS files, because if executed on a wrong page, it produces errors in the browser console.

I'm using "Iron router" for Meteor with only the basic code to make it work. Now, is there a way for me to send scripts as parameters, so it only loads the ones I want the page to load?

Share Improve this question edited Nov 19, 2016 at 9:53 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Aug 30, 2013 at 19:42 n00bn00b 2,7682 gold badges21 silver badges32 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 2

In short, there isn't. (Yet.)

You probably have a wrong code structure if you've got errors. There are ways to execute code only when it's needed - you should probably take a look at template.rendered and template.created callbacks, as well as iron router controllers. However, that's for execution - everything is loaded on the beginning.

That being said, you technically could use things like require.js to load some scripts dynamically. But this negates most of Meteor's advantages. It's also quite difficult to make it work properly with Meteor.

It's true that there's not an official way of doing this yet, but there are some effective ways of doing this. Take, for example, how I load Disqus into a blog section.

Template.blog.rendered = function() {  
  setTimeout(function(){
     var disqus_shortname = 'disqus_shortname'; // required: replace example with your forum shortname
     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
     dsq.src = '//' + disqus_shortname + '.disqus./embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })
}

Which is taken from Josh Owen's blog. The difference is I wrap this is a timeout so that it blocks to wait on the template to actually be rendered.

What this script does is create a script element, set its src and append it as a child to either the head or body of the template. Again, it only does so after the template is rendered so that means all of your elements are available to your script.

If you're using Iron Router you can do the same thing with onAfterAction. The key is to append the new script as a child node in your dom. Hope this helps.

WARNING: NOT THE BEST SOLUTION

OK, this is what I did. I put CSS and JavaScript files on the public folder, then in the <head> I wrote this little script:

$(function() {
    if(location.href.indexOf("http://yourpage./page") > -1) //where page is the url you want to server the files
        $('head').append('<link rel="stylesheet" href="/mobile.app.css" type="text/css" />');
});

While this is not at all the best way to do this, this could be acplished in a "hacky" way.

But it worked.

You can use Preloader. It worked for me :).

My solution was to wrap the JavaScript file contents in a default function (look up exports for ECMAScript 6 if this is unfamiliar), and then import it in Meteor.

In your JavaScript file (we'll call it 'test.js'), wrap the entire contents with this:

export default function() {
    // Your file contents
}

Then, at the top of your Meteor file where you want to use that JavaScript file ('test.js' in our case), write an import at the top of the page like this:

import test from './test.js'

Then in that same Meteor file, you can call the entire contents of your JavaScript file by using the name of the file like a function call:

test();

I'm using React inside of Meteor, but the principle is the same.

发布评论

评论列表(0)

  1. 暂无评论