All geek questions in one place

Meteor download scripts, CSS for pages

The problem I'm currently facing is that I want to be able to execute only certain scripts and CSS files, because if they are executed on the wrong page, they cause errors in the browser console.

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

+6
source share
5 answers

In short, no. (Nonetheless).

You probably have the wrong code structure if you have errors. There are ways to execute code only when necessary - you should probably look at the template.rendered and template.created callbacks, as well as the iron router controllers. However, for execution - everything loads at the beginning.

You can technically use things like require.js to dynamically load some scripts. But this negates most of the benefits of Meteor. It is also quite difficult to get it to work with Meter.

+2
source

WARNING: NOT THE BEST DECISION

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

 $(function() { if(location.href.indexOf("http://yourpage.com/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" />'); });

Although this is not at all the best way to do this, it can be achieved in a “hacked” way.

But it worked.

+1
source

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

+1
source

It is true that there is no official way to do this yet, but there are some effective ways to do this. Take, for example, the way I upload Disqus to 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.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); }) }

What is taken from Josh Owen's blog. The difference is that I wrap it in a timeout so that it blocks the wait on the template itself.

What this script does is create a script element, set its src and add it as a child to the head or body of the template. Again, he does this only after creating the template, so all of your elements are available for your script.

If you use Iron Router, you can do the same with onAfterAction. The key is to add a new script as a child node to your home. Hope this helps.

+1
source

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

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

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

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

 import test from './test.js'

Then, in the same Meteor file, you can call the entire contents of your JavaScript file using the file name, for example, calling a function:

 test();

I use React inside Meteor, but the principle is the same.

0
source

Source: https://habr.com/ru/post/952851/

More articles:


All Articles