Gunnar Bittersmann: <body onload ... und window.onload

Beitrag lesen

Hello out there!

In anderen Worten: Was will mir der Autor damit sagen?

Worauf ich hinauswollte: HTML und JavaScript zu trennen, also gar keinen Eventhandler im HTML-Code zu haben.

Dein JavaScript, das auf allen Seiten der Site bei 'window.onload' ausgeführt werden soll, sähe so aus:

init.js:

window.onload = init;  
  
function init()  
{  
 alert("init");  
}

Soll nun bei einer Seite außer init() noch anderes JavaScript ausgeführt werden, kannst du diesen Code in eine weitere separate JavaScript-Ressource tun:

foo.js:

window.onload = foo;  
  
function foo()  
{  
 init();  
 alert("foo");  
}

Die Funktion 'foo()' ruft 'init()' (aus 'init.js') auf und enthält den zusätzlichen Code.

Die erste Zeile überschreibt 'window.onload' aus dem 'init.js'-Script. Dazu ist es wichtig, dass 'foo.js' _nach_ 'init.js' eingebunden wird:

foo.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>foo</title>  
  <script type="text/javascript" src="init.js"></script>  
  <script type="text/javascript" src="foo.js"></script>  
 </head>  
 <body>  
 </body>  
</html>

Für eine andere Seite mit anderem zusätzlichem Code erstellt du eine weitere separate JavaScript-Ressource:

bar.js:

window.onload = bar;  
  
function bar()  
{  
 init();  
 alert("bar");  
}

und bindest diese statt 'foo.js' ein:

bar.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>bar</title>  
  <script type="text/javascript" src="init.js"></script>  
  <script type="text/javascript" src="bar.js"></script>  
 </head>  
 <body>  
 </body>  
</html>

* * *

Eine andere Möglichkeit ist es, alles in einem JavaScript zu haben und die Ausführung von Codeteilen abhängig zu machen z.B. von der Klasse des 'body':

init.js:

window.onload = init;  
  
function init()  
{  
 alert("init");  
  
 if (document.body.className == "foo") foo();  
 if (document.body.className == "bar") bar();  
}  
  
function foo()  
{  
 alert("foo");  
}  
  
function bar()  
{  
 alert("bar");  
}

foo.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>foo</title>  
  <script type="text/javascript" src="init.js"></script>  
 </head>  
 <body class="foo">  
 </body>  
</html>

bar.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>bar</title>  
  <script type="text/javascript" src="init.js"></script>  
 </head>  
 <body class="bar">  
 </body>  
</html>

See ya up the road,
Gunnar

--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)