Griffin Interactive: Managing multiple onLoad events in JavaScript Archives

Managing multiple onLoad events in JavaScript

April 25, 2003

It is possible to add multiple function calls within the standard onload event within the body tag, however there comes a time when we may want to use the window.onload call within our webpages. This will clash with our onload calls already defined within the body tag. This article written by Robert Dominy, demonstrates the use of a separate script that adds each function to an array which will subsequently execute each onload function in turn. Without it we have no way to guarantee that all our required functions are called. onLoad event
Safe onLoad event

JavaScript Source

Copy the following and paste into the HEAD section of your page.

<script language="JavaScript">
// Browser Detection
isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? true : false;
NS4 = (document.layers) ? true : false;
IEmac = ((document.all)&&(isMac)) ? true : false;
IE4plus = (document.all) ? true : false;
IE4 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 4.")!=-1)) ? true : false;
IE5 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 5.")!=-1)) ? true : false;
ver4 = (NS4 || IE4plus) ? true : false;
NS6 = (!document.layers) && (navigator.userAgent.indexOf('Netscape')!=-1)?true:false;

// Body onload utility (supports multiple onload functions)
var gSafeOnload = new Array();
function SafeAddOnload(f)
{
	if (IEmac && IE4)  // IE 4.5 blows out on testing window.onload
	{
		window.onload = SafeOnload;
		gSafeOnload[gSafeOnload.length] = f;
	}
	else if  (window.onload)
	{
		if (window.onload != SafeOnload)
		{
			gSafeOnload[0] = window.onload;
			window.onload = SafeOnload;
		}		
		gSafeOnload[gSafeOnload.length] = f;
	}
	else
		window.onload = f;
}
function SafeOnload()
{
	for (var i=0;i<gSafeOnload.length;i++)
		gSafeOnload[i]();
}

// Call the following with your function as the argument
SafeAddOnload(yourfunctioname);