Waiting for a script object to load

Question

I'm trying to create a jquery script that will be run from the console of google chrome and will analyze a page. My problem is that when I run the following code:

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
alert($('a'));

I get a message box with null (bad result) But if I separate it to to executions like this:

step1:

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-latest.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

step2:

alert($('a'));

It works great and I get [object] that is my desired result.

The question is what can I do to run this in a single batch?

It's very unclear what you mean by "separate executions." I'm sure your code does not have the words "step1" and "step2" in it, but... — Matt Ball, Jul 24 '12 at 19:58
Check out this related answer: **[Load ordering of dynamically added script tags](http://stackoverflow.com/a/38840724/2247494)** — jherax, Aug 11 '16 at 21:39

jAndy · Answer 1 · 2012-07-24T20:05:14.650

2

In general, you need to attach a listener on the script nodes onload event. jQuery will not be available until its fully transfered and executed. Like

var jq   = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;

    jq.src = "http://code.jquery.com/jquery-latest.min.js";
    jq.onload = jq.onreadystatechange = function() {
    if(!jq.readyState || /loaded|complete/.test( jq.readyState ) ) {
        jq.onload = jq.onreadystatechange = null;
        jq = undefined;
    }
}

head.insertBefore(jq, head.firstChild);

The above code is pretty much rocksolid and works in IE6+ aswell.

edited Jul 24 '12 at 20:05

answered Jul 24 '12 at 20:00

jAndy

231,737
57
305
359

Where in it do I add my alert($('a')) ? – Noam Jul 24 '12 at 20:10
Remember that I'm running it from the Google Chrome Console – Noam Jul 24 '12 at 20:16

score 0 · Answer 2 · answered Jul 24 '12 at 20:00

0

You could try something like this and check the ready state of the script:

jq.onreadystatechange = function() {
  if (this.readyState == 'complete') {
     alert($('a'));
  }
}

answered Jul 24 '12 at 20:00

gherkins

14,603
6
44
70

score 0 · Answer 3 · answered Jul 24 '12 at 20:03

0

If you want a solid way and tested listeners for a complete load of script, try third party libraries like: http://yepnopejs.com/

Start a script loader from scratch is not recommended, not Today.

answered Jul 24 '12 at 20:03

Daniel Aranda

6,426
2
21
28

Waiting for a script object to load

3 Answers3

Linked