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.
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
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>
