zum Wiki: Event onload fehlt
Linuchs
- selfhtml-wiki
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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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.
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