Executing JavaScript when a page loads

I ran across an interesting problem today after installing the latest version of PunBB. You see, the latest version of PunBB natively supports SEO-friendly links through the use of .htaccess files — and you have most likely noticed that we have a forum feed (the blue area below the top menu navigation) that displays the latest posts in our forums. Well after upgrading the forums to the latest version, the forum feed was still using the old code-base from a previous PunBB version. While it still functioned properly, the URLs that were produced by the code were not SEO-friendly. To me, this was a problem.

After much trial and error, I had gotten the new forum feed code ready for use — then a new problem came up. Apparently some of the functions that Word Press uses breaks some of the functions that are used in the feed. I was able to access the feed directly without any hiccups, but using php includes just caused fatal errors being displayed. The solution? I decided to use a simple XML request (aka. an AJAX call) to dynamically load the content into the designated area.

Okay okay, now here’s the juicy part: I (being the picky person that I am) wanted a way to execute the JavaScript when the site loads without having to ever use inline JavaScript code (which means no onload/onclick events). Interestingly enough, I stumbled across this website, which had a neat solution, which is in-fact the reason I’ve decided to post this.

He quotes:

In my opinion, recent advances in JavaScript theory call for the removal of the event handlers that some Web developers-and all WYSIWYG editors-deploy in large masses in their XHTML files, where they don’t belong.

Then goes on to say:

PPK is talking about inline event attributes such as the infamous onclick=”" and onmouseover=”" which have infested our HTML ever since Netscape introduced JavaScript back in version 2.0 of their browser. The alternative to these handlers is to add event handlers to elements after the document has loaded. PPK has detailed coverage of the various ways of doing this on his QuirksMode site.

While this information was pretty interesting and showed me that I wasn’t alone in this problem, I found his solution to the problem even more interesting:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

addLoadEvent(function() {
	// code here
})

Using the code provided above, all I had to do was put my XML request within the addLoadEvent(function(){ … }) area to get the JavaScript code to execute automatically when the page loads. You can see his example here.