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, Mar 14 '12 at 21:17

score 3 · Accepted Answer · answered Mar 14 '12 at 21:30

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 '12 at 21:30

Rob W

341,306
83
791
678

I tried the second option, unfortunately, I see (in Chrome) that the inline script is evaluated before bar.js – IttayD Mar 14 '12 at 21:37
Wouldn't the first option clear the document since it's executing in the head? – Dagg Nabbit Mar 14 '12 at 21:38
@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](http://stackoverflow.com/a/9353610/938089?jquery-getscript-returns-an-parse-error-exception), in [this Google Maps file](http://maps.google.com/maps/api/js?sensor=true). – Rob W Mar 14 '12 at 21:40
I'll just take you on your word and +1 this ;) – Dagg Nabbit Mar 14 '12 at 21:41

score 0 · Answer 2 · answered Mar 14 '12 at 21:19

0

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

<body onload"bar()">

answered Mar 14 '12 at 21:19

beaumondo

4,862
7
29
42

score 0 · Answer 3 · answered Mar 14 '12 at 21:32

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

whiteatom · Answer 4 · 2012-04-01T23:36:25.980

0

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

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

edited Apr 01 '12 at 23:36

answered Mar 14 '12 at 21:36

whiteatom

1,456
2
14
33

score 0 · Answer 5 · answered Mar 14 '12 at 21:38

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();
}

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

5 Answers5