javascript: add script that will be evaluated before body scripts?

Question

I have a script foo.js that is included in <head>. Inside body I have an inline script. Inside it, I want to add to the document another script for bar.js that will be loaded and evaluated before the inline script.

<html> <head> <script src="foo.js" type="text/javascript"/> </head> <body> <script type="text/javascript"> bar() </script> </body> </html>

In foo.js I want to add a script pointing to bar.js

bar.js:

function bar() { alert('hi'); }

What should be the code of foo.js?

NOTE: I know I can use onload in this trivial example. But in my real case, bar.js contains a function that is called several times and I want to be able to inline these calls in the right sections of the page (for code locality)

I'm not really understanding your question. What are you trying to do exactly? — pseudosavant
– pseudosavant, Commented Mar 14, 2012 at 21:17

Rob W · Accepted Answer · 2012-03-14 21:30:42Z

3

You have got two options:

Use document.write('<script src="bar.js"></script>') in foo.js.

Dynamically create and insert a <script> element within the head (since scripts in the head have to be loaded before the rest is parsed, this works):

!function(){ var s = document.createElement('script'), currentScript = document.getElementsByTagName('script')[0]; s.src = "bar.js"; currentScript.parentNode.insertBefore(s, currentScript); }()

answered Mar 14, 2012 at 21:30

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IttayD Over a year ago

I tried the second option, unfortunately, I see (in Chrome) that the inline script is evaluated before bar.js

Dagg Nabbit Over a year ago

Wouldn't the first option clear the document since it's executing in the head?

Rob W Over a year ago

@GGG No. I was also surprised when I saw it at first, but Google Maps does also use it, so it should be well-supported. EDIT: In this answer, in this Google Maps file.

Dagg Nabbit Over a year ago

I'll just take you on your word and +1 this ;)

beaumondo · Accepted Answer · 2012-03-14 21:19:20Z

Can you not use the onload attribute to call the function you want first.

<body onload"bar()">

Niet the Dark Absol · Accepted Answer · 2012-03-14 21:32:53Z

Let me get this straight... You're trying to include a script that will run before the script that includes it? That makes absolutely no sense.

The closest I can figure out is trying to run the included code immediately, before proceeding to further code in the current script block. That can be achieved by fetching the script to include via a synchronous (blocking) AJAX call and running it through eval. This is overall a bad idea and there should never be any need to do such a thing - just put the scr

Starx · Accepted Answer · 2012-03-14 21:38:20Z

As you are doing currently, the script of the head will be evaluated at first and then the one from the body.

But when the script of head is loaded, the script inside the body will not have been loaded yet. SO the function will be unavailable to it.

So you best way I know is to use window.onload which triggers the code once every DOM elements like script are ready for manipulation.

window.onload = function() { bar(); }

whiteatom · Accepted Answer · 2012-04-01 23:36:25Z

I'd use jQuery's ready function that will fire when all the dependancies have loaded...

$(document).ready(function () { bar(); });

Collectives™ on Stack Overflow

javascript: add script that will be evaluated before body scripts?

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Linked

Related