JavaScript scope issue in Opera?

Question

I have a widget-like block of HTML+JavaScript that people can copy/paste into their HTML-page one or multiple times. That block checks if an external JavaScript file is already in the DOM, and loads it if not, something like this:

(function(){
  d = document;
  if (!d.getElementById('ex-scr')) {
    scr = d.createElement('script');
    scr.async = true;
    scr.id = 'ex-scr';
    scr.src = 'external.js';
    d.getElementsByTagName('head')[0].appendChild(scr)
  }
})();

The external JavaScript-file checks the HTML-page for instances of the widget (using getElementsByClassName) and does stuff with those instances, kind of like this;

for (var i=0;i<document.getElementsByClassName('target').length;i++) {
 document.getElementsByClassName('target')[i].style.borderStyle="solid";
}

A working example of this can be found on http://futtta.be/opera_enigma.html.

This works perfectly in Firefox (3.6 & 4b), Chrome (5 & 6) and Safari, but does not work as expected in Opera (tested with most recent version, 10.61): no matter how many 'widgets' (divs with class='target') are present, Opera only acts on the first one because apparently the nodeList only contains 1 entry (length is 1 instead of 2 or 3 or ...).

The problem goes away if in the widget's javascript I call the function to load the external script with window.onload, but I'd like my widget to activate as soon as possible (without interfering with the rest of the page, hence the asynchronous stuff).

So my questions; is there a bug in my code which Firefox, Safari and Chrome ignore? Is this a bug in Opera? How can I get Opera to behave?

Answer 1

The problem goes away if in the widget's javascript I call the function to load the external script with window.onload

I think that's your problem right there. When the getElementsByClassName is executed in your script file, the DOM is not yet guaranteed to be completely present. You won't be able to create reliable behaviour here without waiting until the DOMready or loaded event.

Answer 2

You are probably running into a small timing difference between browsers: if you through DOM add a SCRIPT to the head of a document, Opera will currently wait until the script is executed before parsing the rest of the document. This is the third issue I wrote about here: http://my.opera.com/hallvors/blog/2009/03/07/websites-playing-timing-roulette

The other major browsers will keep parsing while waiting for the external script. They will run the external script when it comes in, which randomly (depending on caching, size of document, speed of connection etc.) might make it run when all the elements you want to act on are in the DOM. However, I can pretty much promise that trying to look up all elements of a certain type in the DOM before you know the full markup is parsed will cause problems for some users in any browser - what you are doing is way too sensitive to small network hiccups, connection speed differences, CPU power and all the other minor differences that affect timing while loading and parsing a web page.

Browsers give you two signals the page is ready for scripting: DOMContentLoaded event and onload. If you need to read dimensions from the document or its elements, you probably need to wait until all images and CSS are loaded (i.e. wait for the onload event), if not you can use DOMContentLoaded. jQuery gives you $(document).ready() to abstract away the differences in what "DOM is ready now" signals browsers support, other frameworks probably have equivalents.