Javascript Caching Problem in IE9?

Question

i have a problem using a Javascript to hide an element.

I'm using an Eventhandler to call some JS when the page is completely loaded, the Eventhandler looks like this:

if (window.addEventListener) {
    window.addEventListener("click", _onclick_handler, false);
    document.addEventListener("DOMContentLoaded", _onload_handler, false);
    window.addEventListener("resize", _onresize_handler, false);
    window.addEventListener("keyup", _onkeyup_handler, false);
}
else if(document.attachEvent) {
    document.attachEvent('onclick', _onclick_handler);
    window.attachEvent('onload', _onload_handler);
    window.attachEvent('onresize', _onresize_handler);
    document.attachEvent('onkeyup', _onkeyup_handler);
}

function _onclick_handler() {

}

function _onload_handler() {
    myFunc();
}

function _onresize_handler() {

}

function _onkeyup_handler() {

}

In myFunc()-function i get a div-element with a specific id, lets say "testdiv", and then hide it by using: .style.display = "none"; The whole line of JS looks like this:

document.getElementById("testdiv").style.display = "none;

This works like a charm in IE6-IE8 and all other common Browsers, but in IE9 the div isnt hidden if i view the page the FIRST time. If i refesh the Page, the div is hidden! So whats the problem in this case?!

Thx for helping :)

Answer 1

In which order and files are the myFunc() and the eventListeners defined? DOMContentLoaded fires before any external resource is loaded. There could be a race condition between the event and the definition of myFunc(), dependent on wether the page comes from cache (faster) or from server (slower).

Also, I've had my share of IE and JS caching problems (see my question 5717206) where the dynamic content generated by script would only be rendered after Refreshing the page.

Turned out that IE thought it had cached the whole page, while it actually had somehow missed some of my scripts. So when rendering from cache it could not load the files and silently ignored them. It helped to append some random query params to the JS URLs so that IE would think them dynamic and won't try to cache them.

To test if you have this scenario, when the DIV is not hidden, simply open IE Dev tools and see if you can manually call myFunc().