JavaScript’s window.onunload resolves css display issue in IE and Opera

I noticed a rather odd issue in Internet Explorer (IE) and Opera, where by a HTML element whose visibility is toggled on and off (using a CSS class via JavaScript mouseover/out event listeners) stays visible when clicking the browsers BACK button.

Rather than reloading the page and thus rendering the element as hidden (until the user rolls their mouse over the relevant area to make the hidden element visible again), the element was visible immediately. I think this has something to do with how these browsers call the previous page’s content, maybe from some kind of cache? (if someone can enlighten me on why this happens in only these two browsers – Mozilla Firefox, Google Chrome and Apple Safari all worked fine – I would be grateful).

It seems the only way I could resolve the issue was to set-up a listener on the window object for the onunload event and to change back the CSS class of the element before the page unloaded

window.onunload = function() {
	document.getElementById("serviceContent").className = "hide";
};

I’d like to know more about this and why IE and Opera render the page in this way when using their respective BACK buttons, any further information appreciated.

Sep 29, 2009CSS, JavaScript - - -
This site is mainly a place for me to share programming snippets which hopefully others will find useful. But otherwise you‘ll find me musing over Integral Theory (aka. the AQAL framework), MMA/UFC and my own kickboxing progress.
CommentsRSS0

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.