Getting around Javascript Onload Functions [Archive]

72dpi

07-11-2006, 08:52 AM

Ok,

i know you are gonna LOVE this hack.

trying to find a workaround for my current font resizer hack, I was thinking about how to implement javascript which uses an "onload" function, and applying it without having to edit any templates.

Thanks to Brothercake http://www.brothercake.com/site/resources/scripts/onload/
There is a function to Load javascripts which normally use <body onload="blahfunction();">

Wanna know how to do it?

here you go:

save this as onload.js

//GO1.1

///////////////////////////////////////
//
//**Generic onload by Brothercake
//**http://www.brothercake.com/
//
///////////////////////////////////////

//onload function
function generic()
{
********// add your function here
****alert('Generic onload function');
};

//setup onload function
if(typeof window.addEventListener != 'undefined')
{
****//.. gecko, safari, konqueror and standard
****window.addEventListener('load', generic, false);
}
else if(typeof document.addEventListener != 'undefined')
{
****//.. opera 7
****document.addEventListener('load', generic, false);
}
else if(typeof window.attachEvent != 'undefined')
{
****//.. win/ie
****window.attachEvent('onload', generic);
}

//** remove this condition to degrade older browsers
else
{
****//.. mac/ie5 and anything else that gets this far
****
****//if there's an existing onload function
****if(typeof window.onload == 'function')
****{
********//store it
********var existing = onload;
********
********//add new onload handler
********window.onload = function()
********{
************//call existing onload function
************existing();
************
************//call generic onload function
************generic();
********};
****}
****else
****{
********//setup onload function
********window.onload = generic;
****}
}

i simply swapped the alert code for my function.

here's how my page now looks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<img src="cb.gif" name="a"><img src="cb.gif" name="b">
<img src="colon.gif" name="c"><img src="cb.gif" name="d">
<img src="cb.gif" name="e"><img src="colon.gif" name="f">
<img src="cb.gif" name="g"><img src="cb.gif" name="h">
<img src="cam.gif" name="j">
<script type="text/javascript" language="javascript" src="clock.js"></script>
<script type="text/javascript" src="onload.js"></script>

</body>
</html>

Well, you get the drift.

Great stuff, hope it helps someone...

72dpi

07-11-2006, 09:14 AM

Or this method looks quite nice:
http://simon.incutio.com/archive/2004/05/26/addLoadEvent

try this method:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>addLoadEvent() test</title>
</head>
<body>
<p>Here goes...</p>
<script type="text/javascript">
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() {
****document.body.style.backgroundColor = 'yellow';
})
addLoadEvent(function() {
****document.body.appendChild(document.createTextN ode('Hungry'));;
})
addLoadEvent(function() {
****document.body.appendChild(document.createTextN ode(' monkeys!'));;
})
</script>
</body>
</html>

I am gonna implement these kinda functions when my scripts normally rely on Onload.

Any suggestions are welcomed.