Cross-browser onload event in a static script tag

Question

Is there a cross-browser way to associate an onload event to a static script tag, in a html document?

The following will not work in IE 7 and IE 8:

<script onload="DoThat" type="text/javascript" src="..."></script>

Some background

I have found a way to accomplish this with a dynamic script tag and if statements. It is for example explained in this MSDN article.

My issue is that I need to locate the current script tag, because I am building widgets that insert DOM elements in-place. In the past I have found some workarounds to do this, but they all have their downside. I am hoping that using the "this" keyword on a script onload event will help.

So you need `onload` to be able to use `this` in order to refer the current script element? — dfsq, Jan 21 '12 at 20:35
Right, that's why I added some context to my question. If I could get "this" to point to the current script without onload, I'd be happy too. As you can see from the link, I have already explored a number of alternatives. — Christophe, Jan 21 '12 at 20:41

dfsq · Answer 1 · 2012-01-21T20:58:09.127

As far as I understand, you need your code to know what script element it belongs to. You would then insert necessary HTML widget content right next to this script or append to the script parent, etc. If so then I would propose you another approach.

Inside you widget javascript file you place next line of code:

var scripts = document.getElementsByTagName('script'),
    thisScript = scripts[scripts.length - 1];

thisScript is the DOM element you are looking for, current script element this code located in. So simple.

Why it works. Detail explanation http://feather.elektrum.org/book/src.html. Just an abstract:

When a script with a src is loaded in a page, the rest of the page is not yet written. The implication is that no matter how many scripts a page contains, the one currently starting to execute is the last one

This is fairly simple and effective technic, although but not so many people know about this possibility. It's reliable and 100% browser compatible. By the way, Google uses this code to render +1 buttons:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'dk'}
</script>

So how do think how the api script could get this hash parameters? In my example it would be thisScript.innerHTML

If you follow the link in my question, you'll see this as one of the alternatives. The assertion that "When a script with a src is loaded in a page, the rest of the page is not yet written" is incorrect with deferred or async scripts. — Christophe, Jan 21 '12 at 20:55
Yep, absolutely if you have deferred loading then this is not suitable. Anyway, it's great alternative for IE7. — dfsq, Jan 21 '12 at 20:59

score 0 · Answer 2 · answered Jan 21 '12 at 21:11

I'm not sure if I caught your needs.
Anyway to locate the current script you can try this example

<script src="jquery-1.7.1.min.js" varTest="valueTest" id="myID"></script>
<script>

var scripts = document.getElementsByTagName('script');      
var pattern = 'jquery-1.7.1.min.js';
var i = undefined;

for (var x=0; x<scripts.length; x++)
{
    if (scripts[x].src.match(pattern)) { i = x; break; }
}

if (typeof(i) != 'undefined')
{
    // Do any association needed here
    var current_script = scripts[i];
    // Just for test            
    console.log(current_script.attributes);
}

</script>

This answer makes perfect sense. But the issue in my case, as I mentioned, is that I have a widget approach, and users could choose to insert the same widget multiple times. Multiple scripts would then have the same "pattern". — Christophe, Jan 21 '12 at 21:34

Cross-browser onload event in a static script tag

2 Answers2

Linked