Linuchs: zum Wiki: Event onload fehlt

Moin,

ich möchte eine Javascript-Funktion ausführen, nachdem das HTML-Dokument geladen ist und suche nach der Syntax für das Event window.onload.

Auf der Wiki-Seite JavaScript/DOM/Event/Übersicht fehlt onload. Wo finde ich es?

Linuchs

  1. Hallo Linuchs,

    ich möchte eine Javascript-Funktion ausführen, nachdem das HTML-Dokument geladen ist und suche nach der Syntax für das Event window.onload.

    Auf der Wiki-Seite JavaScript/DOM/Event/Übersicht fehlt onload. Wo finde ich es?

    Nein, es fehlt nicht. Es ist in der Übersicht (load) und verlinkt zu https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/load.

    LG,
    CK

  2. Hallo,

    ich möchte eine Javascript-Funktion ausführen, nachdem das HTML-Dokument geladen ist und suche nach der Syntax für das Event window.onload.

    was soll an der Syntax anders sein als bei irgendeinem anderen Eventhandler?
    Aber vielleicht möchtest du die alte on<event>-Notation lieber nicht mehr verwenden und stattdessen lieber auf addEventListener() umschwenken. Auch der Flexibilität und Robustheit wegen.

    Auf der Wiki-Seite JavaScript/DOM/Event/Übersicht fehlt onload.

    Nein, es fehlt nicht. Es steht unter L wie load einsortiert. Das Event heißt ja nicht onload, sondern load.

    Wo finde ich es?

    https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/load

    So long,
     Martin

    --
    Bei der Umsetzung von guten Ideen hapert es meist viel mehr an der Wolle als an der Könne.
    1. Nein, es fehlt nicht. Es steht unter L wie load einsortiert. Das Event heißt ja nicht onload, sondern load.

      Okay, hatte noch die alte Form <body onload= ... im Kopf.

      Aber die Syntax aus dem Wiki:

      document.addEventListener('load', dokumentGeladen);
      

      funktioniert bei mir nicht:

      function aktiviereHelptext() {
        alert( "hier aktiviereHelptext" );
        ...
      }
      alert( "vor aktiviereHelptext" );
      document.addEventListener('load', aktiviereHelptext);
      

      Die Meldung hier aktiviereHelptext kommt nicht.

      Ist es wirklich so, dass ich beliebig viele Listener "load" addieren kann?

      Linuchs

      1. Hi,

        Nein, es fehlt nicht. Es steht unter L wie load einsortiert. Das Event heißt ja nicht onload, sondern load.

        Okay, hatte noch die alte Form <body onload= ... im Kopf.

        das hat Orlok ja schön ausführlich erklärt.

        function aktiviereHelptext() {
          alert( "hier aktiviereHelptext" );
          ...
        }
        alert( "vor aktiviereHelptext" );
        document.addEventListener('load', aktiviereHelptext);
        

        Die Meldung hier aktiviereHelptext kommt nicht.

        An deinem Code-Auszug kann ich kein Problem erkennen, das dafür verantwortlich wäre. Kommt da noch etwas anderes in die Quere? Oder bist du vielleicht zu ungeduldig? Das load-Event feuert ja erst, wenn auch alle untergeordneten Ressourcen (Bilder, Stylesheets, Scripte) komplett geladen und ausgewertet sind. Das kann je nach Server und Datenmenge schon mal ein paar Sekunden dauern.

        Ist es wirklich so, dass ich beliebig viele Listener "load" addieren kann?

        Ja. Anders als bei window.onload, wo jede Zuweisung die vorherige einfach überschreibt, baut addEventListener() eine Liste der Handler-Funktionen, so dass man auch mehrere für dasselbe Event registrieren kann.
        Aber brauchst du das denn?

        So long,
         Martin

        --
        Bei der Umsetzung von guten Ideen hapert es meist viel mehr an der Wolle als an der Könne.
      2. Hallo

        Nein, es fehlt nicht. Es steht unter L wie load einsortiert. Das Event heißt ja nicht onload, sondern load.

        Okay, hatte noch die alte Form <body onload= ... im Kopf.

        Es hätte auf der von dir im Eröffnungsposting verlinkten Übersichtsseite aber auffallen dürfen, dass alle anderen Events ebenfalls ohne „on“ aufgelistet sind. :-)

        Aber die Syntax aus dem Wiki … funktioniert bei mir nicht:

        function aktiviereHelptext() {
          alert( "hier aktiviereHelptext" );
          ...
        }
        alert( "vor aktiviereHelptext" );
        document.addEventListener('load', aktiviereHelptext);
        

        Die Meldung hier aktiviereHelptext kommt nicht.

        Dass sich load auf document bezieht, kommt mir komisch vor. Ich bin allerdings kein JS-Experte, von daher solltest du dich in dieser Hinsicht nicht auf mein Bauchgefühl verlassen. Dennoch: Ersetze ich document durch window, funktioniert der Code.

        Tschö, Auge

        --
        Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
        Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
      3. Tach!

        alert( "hier aktiviereHelptext" );
        alert( "vor aktiviereHelptext" );

        Es ist besser, wenn du dich von alert() als Debug-Mechanismus verabschieden würdest. console.log() erzeugt vor allem bei nicht-skalaren Werten eine deutlich verwendbarere Ausgabe. Der Vorteil ist aber auch, dass man die Konsole/Entwicklertools aufmachen muss, um die Ausgabe zu sehen. Und dabei sieht man so ganz nebenbei auch noch die anderen Fehlermeldungen, die der Browser so auszuspucken gedenkt.

        Ist es wirklich so, dass ich beliebig viele Listener "load" addieren kann?

        add heißt hinzufügen, replace wäre ersetzen.

        dedlfix.

      4. Hi,

        function aktiviereHelptext() {
          alert( "hier aktiviereHelptext" );
          ...
        }
        alert( "vor aktiviereHelptext" );
        document.addEventListener('load', aktiviereHelptext);
        

        Die Meldung hier aktiviereHelptext kommt nicht.

        Kann es sein, daß folgendes passiert:

        Das alert ploppt auf.
        Das Laden des Dokuments wird beendet.
        Das alert wird bestätigt.
        Der Event-Listener wird eingehängt.

        Das event wird aber nicht mehr eintreten, da es ja schon vorbei ist ...

        cu,
        Andreas a/k/a MudGuard

        1. Hallo

          Kann es sein, daß folgendes passiert:

          Das alert ploppt auf.
          Das Laden des Dokuments wird beendet.
          Das alert wird bestätigt.
          Der Event-Listener wird eingehängt.

          Das event wird aber nicht mehr eintreten, da es ja schon vorbei ist ...

          Als ich Linuchs' Code gestern, wie dortens dokumentiert, ausprobiert habe, habe ich auch ohne das alert( "vor aktiviereHelptext" ); den Listener im aktuellen Firefox nicht zum Laufen gebracht, außer wenn ich document durch window ersetzt habe. Dieses erste Alert vor dem Listener konnte wegen seines nicht vorhandenseins nicht stören und dennoch hat es nicht funktioniert.

          Tschö, Auge

          --
          Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
          Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview
  3. Hallo Linuchs

    ich möchte eine Javascript-Funktion ausführen, nachdem das HTML-Dokument geladen ist und suche nach der Syntax für das Event window.onload.

    Auf der Wiki-Seite JavaScript/DOM/Event/Übersicht fehlt onload. Wo finde ich es?

    Das Ereignis heißt nicht onload sondern load. Das Prefix on wird nur dann zum Namen hinzugefügt, wenn du den Eventhandler als Attribut für ein Element registrierst, beziehungsweise als Eigenschaft für das DOM-Objekt, welches das Element repräsentiert. Dies solltest du aber ohnehin nicht tun. Es ist besser, die Methode addEventListener zu verwenden, bei der als erstes Argument ein String mit dem Namen des Ereignisses ohne das Prefix on zu übergeben ist.

    Wenn du in dein Programm einsteigen willst nachdem das Dokument fertig geparst ist, die Inhalte also in die Objektrepräsentation des DOM überführt wurden, und du nicht darauf warten willst, dass externe Ressourcen wie etwa Bilder fertig geladen sind, wäre im Übrigen das Ereignis DOMContentLoaded die bessere Wahl.

    window.addEventListener('DOMContentLoaded', function ( ) {
      // do something
    });
    

    Die Ereignisse load und DOMContentLoaded können auch zusammen verwendet werden. Das heißt, du kannst zunächst den allgemeinen Einstiegspunkt für dein Programm an DOMContentLoaded knüpfen, und wenn bestimmte Operationen davon abhängig sind, dass etwa ein Bild geladen wurde, dann kannst du für dieses Bild und das Ereignis load einen weiteren Eventhandler registrieren. Auf die Art wird die Ausführung deines Programms nicht durch den Ladevorgang blockiert.

    Gruß,

    Orlok

    1. Hallo Orlok,

      window.addEventListener('DOMContentLoaded', function ( ) {
        // do something
      });
      

      danke dir, die Meldung von alert kommt jetzt. Doch die gewünschte "Arbeit" wird nicht verrichtet, die Helptexte sind nicht abrufbar. Ein JS-Fehler wird bei deren Klick nicht gezeigt. Bisher hatte ich das <script> am Ende der HTML-Datei, als fauler Sack wollte ich mir sparen, das zusätzlich zu notieren.

      window.addEventListener('DOMContentLoaded', function ( ) {
        alert( "hier aktiviereHelptext" );
      /* *************************************************
         *
         * HELP-Icons/Buchstaben anschliessen
         *
         ************************************************* */
        obj_help = document.getElementsByClassName( "help" );
        for ( i=0; i<obj_help.length; i++ ) {
          if ( obj_help[i].id ) {
            obj_help[i].addEventListener('click', function (event) {
              getHelptextXY( "[HOST]", 0, "[kw]", "[ll]", this.id, "[lg]", event.clientX, event.clientY );
            });
          }
        }
      });
      

      Habe den Verdacht, dass durch eine andere eingebundene .js Datei der Listener ausser Kraft oder gar nicht erst in Kraft gesetzt wird. Vielleicht hier beim Table Sort (Code ist nicht von mir)?

      	var JB_addEvent = function (obj, type, fn) {
      		if(type.search("on")==0) type = type.substr(2);
      		if (obj.addEventListener) {
      			obj.addEventListener(type, fn, false);
      		}
      		else if (obj.attachEvent) {
      			obj.attachEvent('on' + type, function () {
      				return fn.call(obj, window.event);
      			});
      		}
      	} // addEvent
      ...
      	JB_addEvent(window,"onload",function(e) {
      		if (!document.getElementsByTagName) return;
      		if (!document.getElementsByTagName('body')[0].appendChild) return;
      		var Sort_Table = JB_getElementsByClass_TagName("table","sortierbar");
      		for(var i=0;i<Sort_Table.length;i++) new JB_Table(Sort_Table[i]);
      	});
      

      Linuchs

      1. Habe den Verdacht, dass durch eine andere eingebundene .js Datei der Listener ausser Kraft oder gar nicht erst in Kraft gesetzt wird. Vielleicht hier beim Table Sort (Code ist nicht von mir)?

        Info: Habe Table Sort rausgenommen, Fehler bleibt.

        Linuchs

        1. Uups ... Fehler gefunden.

          Ich darf diese Funktion gar nicht in eine .js Datei auslagern, weil dann die [Platzhalter] nicht gefüllt werden. Die werden nur innerhalb des HTML Dokuments gefüllt.

          getHelptextXY( "[HOST]", 0, "[kw]", "[ll]", this.id, "[lg]", event.clientX, event.clientY );
          

          Eine .js kann man wohl beim Einbinden nicht mit Parametern rufen?

          <script src="css/ajax_getHelptext.js?t=[hh][mi]"></script>
          

          Die angehängte Zeit dient nur während der Testphase, dass die .js nicht aus dem Cache genommen wird.

          Linuchs

          1. Hallo

            Eine .js kann man wohl beim Einbinden nicht mit Parametern rufen?

            doch, kann man. Man muss die Parameter dann aber auch finden und abfragen.

            Gruß
            Jürgen

            1. Hallo Jürgen,

              Eine .js kann man wohl beim Einbinden nicht mit Parametern rufen?

              doch, kann man. Man muss die Parameter dann aber auch finden und abfragen.

              Habe recherchiert und diese Empfehlung gefunden. Habe ich so umgesetzt:

              <script id="js_getHelptext" src="css/ajax_getHelptext.js?t=1035"></script>
              
              // Script in Datei ajax_getHelptext.js ermitteln
              var objScript = document.getElementById("js_getHelptext");
              alert ( "[" +objScript.src +"]" );
              

              Meldung: [undefined]

              So geht's also nicht. Oder habe ich was übersehen?

              Linuchs

              1. Hallo,

                So geht's also nicht. Oder habe ich was übersehen?

                ich bin ein schlechter Fehlersucher, daher sehe ich jetzt auch nicht, warum es nicht geht.

                Daher hier mal ein Auszug aus einem meiner Scripte, mit dem ich dem Pfad zur JS-Datei sowie den Parameter „autoload“ ermittele. Der Code sucht das Script nach seinem Dateinamen.

                window.JB = window.JB || {};
                JB.GPX2GM = {ver:"5.16",dat:"13. 3. 2016",fname:"GPX2GM.js"};
                
                (function() {
                	JB.GPX2GM.Path = "";
                	JB.GPX2GM.autoload = false;
                	var scr = document.getElementsByTagName("script");
                	for(var i=scr.length-1;i>=0;i--) if(scr[i].src && scr[i].src.length) {
                		var path = scr[i].src;
                		var pos = path.search(JB.GPX2GM.fname);
                		if(pos!=-1) {
                			JB.GPX2GM.autoload = !(path.search("autoload=false")>pos);
                			JB.GPX2GM.Path = path.substring(0,pos);
                		}
                	}
                })();
                

                Gruß
                Jürgen

                1. Hallo Jürgen,

                  	var scr = document.getElementsByTagName("script");
                  	for(var i=scr.length-1;i>=0;i--) if(scr[i].src && scr[i].src.length) {
                  

                  kommst du da nicht durcheinander? Du hantierst einerseits mit der src-Eigenschaft, und hast zugleich einen Bezeichner scr als Liste der script-Elemente. Das ist verzwackt ... zumal es anscheinend auch ein häufiger Tippfehler ist, dass jemand versehentlich scr anstatt src schreibt ...

                  So long,
                   Martin

                  --
                  Bei der Umsetzung von guten Ideen hapert es meist viel mehr an der Wolle als an der Könne.
                  1. Hallo Martin,

                    kommst du da nicht durcheinander?

                    warum soll ich mir das Leben leicht machen? :)

                    Das ist meinem Geiz geschuldet: scr sind nun mal drei Byte weniger als script.

                    Gruß
                    Jürgen

              2. Tach!

                Eine .js kann man wohl beim Einbinden nicht mit Parametern rufen?

                doch, kann man. Man muss die Parameter dann aber auch finden und abfragen.

                Die eingebundene Ressource läuft in demselben Kontext ab wie die einbindende. Es wäre einfach möglich, eine globale Variable zu setzen und darauf zuzugreifen. Alternativ bietet sich auch das Speichern im LocalStorage an, wenn Daten requestübergreifend benötigt werden. Das Parsen der URL jedenfalls ist unnötig aufwendig.

                Habe recherchiert und diese Empfehlung gefunden. Habe ich so umgesetzt:

                <script id="js_getHelptext" src="css/ajax_getHelptext.js?t=1035"></script>
                
                // Script in Datei ajax_getHelptext.js ermitteln
                var objScript = document.getElementById("js_getHelptext");
                alert ( "[" +objScript.src +"]" );
                

                Meldung: [undefined]

                So geht's also nicht. Oder habe ich was übersehen?

                Doch, so geht es. Du machst da was anderes verkehrt (abgesehen von alert() zu Debugzwecken. Das ist zwar nicht direkt falsch, aber warum mit einem Streichholz Licht machen, wenn man Strom und eine Lampe hat?)

                dedlfix.

      2. Hallo,

        Habe den Verdacht, dass durch eine andere eingebundene .js Datei der Listener ausser Kraft oder gar nicht erst in Kraft gesetzt wird. Vielleicht hier beim Table Sort (Code ist nicht von mir)?

        nee, der ist von mir ;)

        	var JB_addEvent = function (obj, type, fn) {
        		if(type.search("on")==0) type = type.substr(2);
        		if (obj.addEventListener) {
        			obj.addEventListener(type, fn, false);
        		}
        		else if (obj.attachEvent) {
        			obj.attachEvent('on' + type, function () {
        				return fn.call(obj, window.event);
        			});
        		}
        	} // addEvent
        ...
        	JB_addEvent(window,"onload",function(e) {
        		if (!document.getElementsByTagName) return;
        		if (!document.getElementsByTagName('body')[0].appendChild) return;
        		var Sort_Table = JB_getElementsByClass_TagName("table","sortierbar");
        		for(var i=0;i<Sort_Table.length;i++) new JB_Table(Sort_Table[i]);
        	});
        

        da werden die meisten Eventhandler mit addEventListener oder attachEvent gesetzt. Nur das click-Event im Tabellenkopf wird noch mit t.onclick = function() { dieses.sort(nr); }; gesetzt. Muss ich mal ändern. Sonst nimm doch den Sortierer mal raus, dann siehst du ja, ob sich da was nicht verträgt.

        Gruß
        Jürgen