Hummer og kanari

Nedenfor følger noen oppskrifter på litt av hvert fra IT hverdagen som er hentet fra svar på Orakel henvedelser

Kalle skript når en webside lastes

Dersom du ikke finner onload hendelsen på websiden, så se etter onload, addEventListener eller attachEvent i eksterne skript filer.

Benytte onload hendelsen til body elementet

Den enkleste metoden er å kalle eller utføre skriptet fra onload hendelsen til body elementet som i filen 03_Eksempel_1.htm:

<html>

  <head>
    <title>Kalle skript med fra onload hendelsen til body elementet<title>
  </head>

  <body onload="alert('Dette skriptet ble kalt fra onload hendelsen til body elementet')">
    <h1>Eksempel 1</h1>
    <p>benytter onload hendelsen til body elementet.</p>
  </body>

</html>

Problemet med denne metoden er at vi blander kode og innhold.

Knytte funksjonskallet  til window objektets onload hendelse

samtidig som vi skiller ut koden som forklart på siden DHTML - Eksterne filer og vist her i filen 03_Eksempel_2.htm

<html>

  <head>
    <title>Knytte kallet til onload hendelsen til windows objektet</title>
    <script src="03_Eksempel_2.js" type="text/javascript"></script>
  </head>

  <body>
    <h1>Eksempel 2</h1>
    <p>benytter en ekstern javascript fil med en funksjon knyttet til onload
      hendelsen til window objektet.</p>
  </body>

</html>

som kobler til javascript filen 03_Eksempel_2.js:

window.onload = init();

function init() {
    alert('Dette skriptet ble kalt fra onload hendelsen til window objektet');
}

Problemet med denne metoden er at dersom vi har flere javascript som knytter en funksjon til et objektets onload hendelse, så overskriver de hverandre.

Legge flere lyttere til en hendelse

ved bruk av addEventListener eller attachEvent metodene som i 03_Eksempel_3.htm:

<html>

  <head>
    <title>Legge flere lyttere til en hendelse</title>
    <script src="03_Eksempel_3a.js" type="text/javascript"></script>
    <script src="03_Eksempel_3b.js" type="text/javascript"></script>
  </head>

  <body>
    <h1>Eksempel 3</h1>
    <p>kaller init() funksjone i to forskjellige javascript filer
      ved å legge til nye lyttere til onload hendelsen
    </p>
  </body>

</html>

som kobler til javascript filen 03_Eksempel_3a.js hvor addEvent funksjonen defineres sammen med et kall til init() fra en ny window onload lytter. Koden er hentet fra John Resigs Flexible Javascript Events som også viser hvordan du kan fjerne disse lytterne.

function addEvent( obj, type, fn ) {
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent("on"+type, obj[type+fn] );
    }
}

function init() {
    alert('Denne meldingen blir kalt fra funksjonen init() i 03_Eksempel_3a');
}

addEvent(window, 'load', init);

og enda en javascript fil 03_Eksempel_3b.js som også legger til et kall til en init() funksjon fra en ny window onload lytter.

function init() {
    alert('Denne meldingen blir kalt fra funksjonen init() i 03_Eksempel_3b');
}

addEvent(window, 'load', init);