How to add a script to head in 1.3?

help
1

I need to add Stripe. Stripe is supposed to go in the head of the page.

Is there a way to add to the head of the page? I keep getting errors with iFrame when I do.

relevant stripe docs here

2

This works for me:

//client/main.html
<head>
  <script type='text/javascript'>console.log('test')</script>
</head>

Alternatively, you might find it easier to just use the npm package

3

There’s also a new API in 1.3 for injecting stuff even before the Meteor script tags. @gadicc What was that API again? Can you write a tiny example?

1 Like
4

link to docs? Where is this?

5

Here it is: https://github.com/meteor/meteor/pull/3860#issuecomment-203209257

There’s also this nice package: https://github.com/meteorhacks/inject-data

EDIT: I meant to link to meteorhacks/inject-initial, not inject-data.

1 Like
6

you can script like google analytics does

7

I think it looks like this (but haven’t tried):

WebApp.connectHandlers.use(function(req, res, next) {
  if (/* check URL */) {
    req.dynamicHead = 'something to insert';
    req.dynamicBody = 'something to insert';
  }
});

However, for non-dynamic content, that will always remain the same (i.e. inserting some external script into the HEAD), I think just doing it via an HTML file is much simpler and clearer:

<head>
  <script src="..."></script>
</head>

It’s fine to have many such files, Meteor goes through all the *.html files and concatenates all the HEAD sections.

8

Neither seems to be working, I think it has something to do with Stripe in particular

9

The thing with that is that the script tags are always inserted after the script tags for all the Meteor core packages and 3rd party packages. In my case, I want a non-dynamic script tag to be the very first script tag in the head. Even with the dynamicHead feature, the content comes after the other stuff. Seems like meteorhacks/inject-initial is the way to do it.

10

Oh, previously, I meant to link to meteorhacks/inject-initial, not meteorhacks/inject-data (see edited comment above). That package makes it easy!

11

Ah ok, I hear you. Yes, in that case, meteorhacks:inject-initial is the way to go :ok_hand:

Can you give @corvid an example of how to use it in this case? :slight_smile:

12

Yep, here’s how @corvid:

meteor add meteorhacks:inject-initial

// on the server side
Inject.rawModHtml('inject a script at the beginning of the head', function(html) {
    return html.replace('<head>', '<head><script>...</script>');
});
13

@gadicc Just to make sure, when and where do we use this code? I’m guessing anywhere on the serverside, not inside a Meteor.startup block?

14

Exactly :ok_hand:

Thanks!

P.S. I’m pretty sure that even the rawHead() method injects to the very top of the HEAD.

1 Like
16

Ah, good point. I used rawModHtml because the docs only had an example of that one, and didn’t explain that detail about rawHead. See, goes to show that I like owning code more than reading it, and otherwise try to rely on documentation. :smiley:

17

:thumbsup:

I have it on good authority that a PR adding such an example and clarification would be graciously accepted to the project :wink:

1 Like
18

Still getting some problems:

This occurs after trying to use both inject and just plain head tag to include https://js.stripe.com/v2/

19

Can you clone your project for us on github? @trusktr helped me realize that the plain head tag would be too late, but the inject code should work perfectly for this.

20

Or perhaps before that, can you view-source on your project and confirm if the script is being injected at the top of the HEAD tag?

21

For whatever reason, removing and re-adding all packages seemed to fix the problem :\

1 Like