WernerK: window.onload function()

SELF-Forum

window.onload function()

WernerK
– Informationen zu den Bewertungsregeln

Hallo,
ich habe kein eigentliches Problem sondern vielmehr eine Verständnisfrage.

"body onload" ist mir eigentlich klar. Hier wird beim Laden der Seite eine Funktion ausgeführt. Im Beispiel unten "Ausgabe()"

<body onload="Ausgabe();">

Ich habe heute einen alten Self Thread entdeckt wo window.onload verwendet wird.
http://forum.de.selfhtml.org/archiv/2009/1/t181724/#m1201995

Was ist denn eigentlich der genaue Unterschied zwischen "window.onload=" und "body onload="?
Beides wird doch ausgeführt wenn die Seite geladen ist oder?

Und, was bewirkt "window.onload = function()" ?
Wird hier explizit gesagt das nach dem Laden der Seite eine Funktion ausgeführt wird?

  
window.onload = function() {  
  MeineFunction();  
}

Könnte man nicht auch einfach
window.onload = MeineFunction();
sagen?

Bzw. in einem weiteren Self Artikel sieht man hinter window.onload die Funktion ohne Klammer
http://de.selfhtml.org/javascript/beispiele/seitenanzeige.htm

also;
window.onload = opera_befreien;

warum müssen / können hier die Klammern weggelassen werden, bzw. was macht man wenn eine Funktion zwingend Parameter braucht?

vielen Dank für eure Antworten

Gruss
Werner

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. window.onload function()

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hallöchen,

    "body onload" ist mir eigentlich klar. Hier wird beim Laden der Seite eine Funktion ausgeführt. Im Beispiel unten "Ausgabe()"
    <body onload="Ausgabe();">

    richtig.

    Ich habe heute einen alten Self Thread entdeckt wo window.onload verwendet wird.
    http://forum.de.selfhtml.org/archiv/2009/1/t181724/#m1201995

    Ja, das ist die elegantere Methode.

    Was ist denn eigentlich der genaue Unterschied zwischen "window.onload=" und "body onload="?

    Im einen Fall hast du Javascript-Code im HTML, im anderen Fall sind HTML und Javascript sauber getrennt. Diese Trennung strebt man normalerweise an, weil der Code dann meist übersichtlicher und leichter zu warten ist.

    Beides wird doch ausgeführt wenn die Seite geladen ist oder?

    Ja, von der Wirkung her gibt es keinen Unterschied.

    Und, was bewirkt "window.onload = function()" ?
    Wird hier explizit gesagt das nach dem Laden der Seite eine Funktion ausgeführt wird?

    Ja. Damit wird die Funktion, die nach dem Fertigladen ausgeführt werden soll, direkt an das window-Objekt gebunden.

    window.onload = function() {

    MeineFunction();
    }

      

> Könnte man nicht auch einfach  
> window.onload = MeineFunction();  
> sagen?  
  
Ja, das ist aber nicht dasselbe.  
  

> Bzw. in einem weiteren Self Artikel sieht man hinter window.onload die Funktion ohne Klammer  
  
Genau das ist der springende Punkt. Man möchte die Funktion ja nicht \*sofort\* aufrufen und dem Eventhandler ihr Ergebnis zuweisen, sondern man möchte dem Eventhandler das Funktionsobjekt selbst zuweisen. Klammern hinter einem Funktionsnamen bedeuten aber immer den Aufruf der Funktion.  
  

> window.onload = opera\_befreien;  
  

> warum müssen / können hier die Klammern weggelassen werden, bzw. was macht man wenn eine Funktion zwingend Parameter braucht?  
  
Was es mit den Klammern auf sich hat, hast du jetzt vermutlich verstanden. Wenn deine Funktion tatsächlich Argumente braucht, musst du eine anonyme Funktion "drumherum" bauen:  
  

> window.onload = function() { opera\_befreien(arg1, arg2); };  
  
So long,  
 Martin  

-- 
Die neue E-Mailadresse des Papstes: <mailto:urbi@orbi>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. window.onload function()

    molily Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Was ist denn eigentlich der genaue Unterschied zwischen "window.onload=" und "body onload="?

    Funktional keiner.

    Beides wird doch ausgeführt wenn die Seite geladen ist oder?

    Ja. Das eine ermöglicht die Notierung im JavaScript, das andere im HTML. Da man heutzutage dazu tendiert, Event-Handler auch im JavaScript zu setzen und aus dem HTML möglichst herauszuhalten, bietet sich die JavaScript-Variante an, die keine Änderungen in den HTML-Dokumenten nötig macht.

    Und, was bewirkt "window.onload = function()" ?

    Es erzeugt eine Funktion und speichert sie in der Objekt-Eigenschaft window.onload. Das ist das Schema des traditionellen Event-Handlings.

    Wird hier explizit gesagt das nach dem Laden der Seite eine Funktion ausgeführt wird?

    Ja.

    window.onload = function() {

    MeineFunction();
    }

    
>   
> Könnte man nicht auch einfach  
> window.onload = MeineFunction();  
> sagen?  
  
Man könnte  
window.onload = MeineFunction;  
sagen, ja, das hätte denselben Effekt wie der obige Code, der noch eine zweite Wrapper-Funktion erzeugt.  
  
Warum man nicht  
window.onload = MeineFunction();  
schreiben kann bzw. das nicht den gewünschten Effekt hätte, habe ich hier beschrieben:  
<http://molily.de/js/einbindung.html#fehler-handler-aufrufen>  
  

> warum müssen / können hier die Klammern weggelassen werden  
  
Weil da sonst stehen würde:  
  
objekt.eigenschaft = funktion();  
  
Die »()« rufen die Funktion sofort (zum Zeitpunkt dieser Zuweisung). Damit würde man den Rückgabewert des Aufrufes dieser Funktion der Eigenschaft zuweisen. Traditionelles Event-Handling funktioniert aber so, dass man das Funktionsobjekt in einer Eigenschaft speichert.  
  
objekt.eigenschaft = funktion;  
  

> bzw. was macht man wenn eine Funktion zwingend Parameter braucht?  
  
Siehe den [obigen Link](http://molily.de/js/einbindung.html#fehler-handler-aufrufen).  
In dem Fall könnte man eine weitere Funktion anlegen, es bietet sich dann eine Funktion an, die mit einem Funktionsausdruck notiert wurde.  
  
~~~javascript
window.onload = function () { // Funktionsausdruck  
   handler1(param1, param2, param3);  
   handler2(param1, param2, param3);  
};

    Das kann man abstrahieren und dann nennt es sich »Currying«, aber das ist schon viel komplizierter.

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. window.onload function()

      WernerK
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      beim durchlesen deiner wirklich tollen Webseite mit sehr verständlicher Schreibweise ist doch noch eine kleine Frage auf getaucht.

      die Funktion "loadMsg" zeigt bei mir eine Art Alert Box an, die man dann auch wieder schließen kann.

        
loadMsg('Das Laden war erfolgreich!','msgbox_success');

      Anhand deiner Erklärung und deines Artikels;
      http://molily.de/js/einbindung.html#fehler-handler-aufrufen
      habe ich gelernt das man eigentlich schreiben müßte:
      window.onload = loadMsg;

      und dann eine Hilfsfunktion die die eigentliche Funktion mit Parameter aufruft.
      Mache ich aber;
      window.onload = loadMsg('Das Laden war erfolgreich!','boxInfo');

      klappt das auch und auch der Firebug meldet keinen Fehler.
      Ist das nun einfach eine syntaktisch falsche Schreibweise oder sollte man besser immer dann eher so arbeiten?

      window.onload = function(){
       loadMsg('Das Laden war erfolgreich!','boxInfo');
      }

      vielen Dank nochmals
      Gruss
      Werner

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. window.onload function()

        Der Martin
        +1 Informationen zu den Bewertungsregeln

        Hallo,

        Mache ich aber;
           window.onload = loadMsg('Das Laden war erfolgreich!','boxInfo');
        klappt das auch und auch der Firebug meldet keinen Fehler.

        das liegt an der zeitlichen Abfolge der einzelnen Schritte.

        Ist das nun einfach eine syntaktisch falsche Schreibweise oder sollte man besser immer dann eher so arbeiten?

        Es ist syntaktisch richtig, aber semantisch falsch. Was gibt denn deine Funktion loadMsg() zurück? Vermutlich gar nicht, also 'undefined'?

        Auf jeden Fall passiert bei deinem Beispiel folgendes:
        Das Dokument wird geladen, der Ladevorgang ist *noch nicht* abgeschlossen, da trifft der Browser auf die Javascript-Anweisung

        window.onload = loadMsg('Das Laden war erfolgreich!','boxInfo');

        Er ruft also loadMsg() auf und wartet darauf, dass jemand die Messagebox wieder schließt. Den Rückgabewert von loadMsg() - also "nichts" - legt er nun in window.onload ab. Erst dann wird die Bearbeitung des Dokuments fortgesetzt. Einen Moment später ist das Dokument fertig geladen, der Browser schaut nach, ob in window.onload etwas hinterlegt ist, was auszuführen wäre - und er stellt fest, da ist "nichts", also 'undefined'. Also kein onload, der Fall ist erledigt.

        Deine Funktion wird also aufgerufen - aber nicht, wie gewünscht, nach dem Laden des Dokuments, sondern schon währenddessen.

        So long,
         Martin

        --
        why the heck do you jerk think, that wir ein doppelposting nicht bemerken, wenn you zwischendurch the sprache wechselst?
          (wahsaga)
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. nochmals Danke ...

          WernerK
          – Informationen zu den Bewertungsregeln

          Hallo Martin, Hallo Mathias,
          nochmals ganz herzlichen Dank für eure tolle Erklärung.
          Jetzt habe sogar ich den Unterschied kapiert :-)

          Diese Erklärung (und auch die von Mathias) hat mir sehr geholfen.

          Auf jeden Fall passiert bei deinem Beispiel folgendes:
          Das Dokument wird geladen, der Ladevorgang ist *noch nicht* abgeschlossen, da trifft der Browser auf die Javascript-Anweisung

          window.onload = loadMsg('Das Laden war erfolgreich!','boxInfo');

          Er ruft also loadMsg() auf und wartet darauf, dass jemand die Messagebox wieder schließt. Den Rückgabewert von loadMsg() - also "nichts" - legt er nun in window.onload ab. Erst dann wird die Bearbeitung des Dokuments fortgesetzt. Einen Moment später ist das Dokument fertig geladen, der Browser schaut nach, ob in window.onload etwas hinterlegt ist, was auszuführen wäre - und er stellt fest, da ist "nichts", also 'undefined'. Also kein onload, der Fall ist erledigt.

          Deine Funktion wird also aufgerufen - aber nicht, wie gewünscht, nach dem Laden des Dokuments, sondern schon währenddessen.

          So konnte ich mir nun richtig gut vorstellen was hier step by step abläuft und wie die Auswirkungen sind.
          Echt klasse.

          vielen Dank und viele Grüße
          Werner

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. window.onload function()

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Mache ich aber;
        window.onload = loadMsg('Das Laden war erfolgreich!','boxInfo');

        klappt das auch

        Es klappt nicht - zumindest tut es nicht das, was du erwartest. Es wartet gar nicht, bis das Dokument fertig geladen ist und das load-Ereignis eintritt, sondern ruft die Funktion sofort auf. Zu dem Zeitpunkt, an dem der Browser diese JavaScript-Codezeile ausführt - das ist wahrscheinlich noch bevor er das gesamte Dokument samt Bilder usw. geladen hat.

        Es ist dasselbe wie
        loadMsg('Das Laden war erfolgreich!','boxInfo');

        Denn die Zuweisung an window.onload zeitigt keine Folgen, weil der Aufruf von loadMsg höchstwahrscheinlich kein Funktionsobjekt zurückgibt.

        und auch der Firebug meldet keinen Fehler.
        Ist das nun einfach eine syntaktisch falsche Schreibweise

        Wie Martin sagte: Das ist durchaus erlaubt und möglich, *macht* aber etwas anderes. Man kann schreiben

        objekt.eigenschaft = funktion(param1);

        Dann wird die Funktion sofort ausgeführt und wert bekommt den Rückgabewert der Funktion zugewiesen. Mehr nicht.

        Wenn ich hingegen die Funktion nicht sofort ausführen will, sondern sie als Event-Handler registrieren will, damit sie irgendwann später beim Eintreten des Ereignisses gestartet wird: Dann erfüllt der obige Code nicht diesen Zweck.

        window.onload = function(){
        loadMsg('Das Laden war erfolgreich!','boxInfo');
        }

        So musst du arbeiten, um das Ziel zu erreichen, dass beim erfolgreichen Laden des Dokuments loadMsg mit diesen Parametern aufgerufen wird.

        Mathias

        --
        JavaScript-Erweiterung für das SELFHTML-Forum
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. Vielen Dank

    WernerK
    – Informationen zu den Bewertungsregeln

    Vielen herzlichen Dank an euch für die tolle Erklärung
    Jetzt ist es mir klarer geworden.

    Gruss
    Werner

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln