window.onload firing too early in IE

The Problem

Where I work, our tool supports 6 different languages, where translations are contained in various sets of language files. One of these sets consists of the translations stored in Javascript files as JSON blocks, something like translations.en.js containing a structure

1
2
3
4

Translations = {
helloWorld: "Hello world",
// ... etc.
};

Translation works by looking for spans with an attribute data-lang, which in the above example would be <span data-lang="helloWord"></span>, and swaps in the relevant string to make it <span data-lang="helloWord">Hello world</span>.

In this particular instance, the current language was only obtainable from the client, so the page would have to load while var current_lang was initialised. Once I had the current language, I was looking to load the file on the fly, kind of like the way you add Google Analytics code to your page, something like (in <script> tags in the document head):

1
2
3
4
5

//load the language file
script = document.createElement('script');
script.type="text/javascript";
script.src = "../lang/translations." + current_lang + ".js";
document.getElementsByTagName("head")[0].appendChild(script);

Further down the document, I had my window.onload function which swaps in the translations by looking up the Translations object.

As usual, this worked fine in all browsers, except Internet Explorer. You would expect that a browser’s window.onload event would only fire once all files have been loaded and the document has ‘settled down’. However, with IE, window.onload was firing before the language file had loaded and thus I was getting an “unknown variable: ‘Translations'” kind of error.

The Solution

In order to get around this, I created a global variable called translationsLoaded (set to false) and tied it to the window object, just before I append the language Javascript to the head, i.e. (from the example above)

1
2
3

script.src = "../lang/translations." + current_lang + ".js";
window.translationsLoaded = false; // add this in
document.getElementsByTagName("head")[0].appendChild(script);

Then, further down in my file where I have the window.onload I did:

1
2
3
4
5
6
7
8
9
10

window.onload = function()
{
// needed for IE - event firing before lang file has loaded.
// gets fired via the js lang file
if (typeof window.translationsLoaded == 'undefined' || !window.translationsLoaded) {
return;
}
// rest of function
// ...
}

Then, finally at the end of my translations.en.js I added code to set the variable to true and a manual call to the window.onload function:

1
2
3
4
5

// needed for IE, onload event was firing too early in frmupload.html
if (typeof window.translationsLoaded != 'undefined') {
window.translationsLoaded = true;
window.onload();
}

Conculsion

It’s frustrating when IE (even modern IE8 and 9!) just don’t behave like all the other browser. Luckily, once you find the source of the problems, there’s usually some sort of work around.

window.onload firing too early in IE

The Problem

The Solution

Conculsion

No Comments

Leave a reply