it-swarm.com.de

Bewährte Methode für die Verwendung von window.onload

Ich entwickle Joomla-WebsitesKomponenten/-Module und -Plugins und benötige gelegentlich die Möglichkeit, JavaScript zu verwenden, das beim Laden der Seite ein Ereignis auslöst. Meist wird dies mit der Funktion window.onload erledigt.

/- Meine Frage ist:  

  1. Ist dies der beste Weg, um JavaScript-Ereignisse beim Laden der Seite auszulösen, oder gibt es einen besseren/neueren Weg?
  2. Wenn dies der einzige Weg ist, um ein Ereignis beim Laden der Seite auszulösen, was ist der beste Weg, um sicherzustellen, dass mehrere Ereignisse von verschiedenen Skripts ausgeführt werden können?
37
privateace

window.onload = function(){}; funktioniert, aber wie Sie vielleicht bemerkt haben, können Sie mit nur 1 Listener angeben.

Ich würde sagen, die bessere/neuere Methode wäre, ein Framework zu verwenden oder einfach eine einfache Implementierung der nativen addEventListener- und attachEvent (für IE) -Methoden zu verwenden, die es Ihnen ermöglicht, remove die Zuhörer auch für die Veranstaltungen.

Hier ist eine Browserübergreifende Implementierung:

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

Für den window.onload-Fall verwenden Sie: listen("load", window, function() { });


EDIT Ich möchte meine Antwort um wertvolle Informationen erweitern, auf die andere hingewiesen haben.

Hier geht es um die DOMContentLoaded (Mozilla-, Opera- und Webkit-Nightlies unterstützen dies derzeit) und die onreadystatechange (für IE) events, die auf das document -Objekt angewendet werden können um zu verstehen, wann das Dokument zur Bearbeitung verfügbar ist (ohne zu warten, bis alle Bilder/Stylesheets usw. geladen sind).

Es gibt viele "hackige" Implementierungen für die Unterstützung von Cross-Browsern. Daher empfehle ich dringend, ein Framework für diese Funktion zu verwenden.

44
Luca Matteis

Moderne Javascript-Frameworks haben die Idee eines "document ready" -Ereignisses eingeführt. Dies ist ein Ereignis, das ausgelöst wird, wenn das Dokument zur DOM-Bearbeitung bereit ist. Das "Onload" -Ereignis wird nur ausgelöst, nachdem ALLES auf der Seite geladen wurde.

Neben dem "document ready" -Ereignis haben die Frameworks eine Möglichkeit geboten, mehrere Bits von Javascript-Code und -Funktionen in eine Warteschlange zu stellen, um ausgeführt zu werden, wenn das Ereignis ausgelöst wird. 

Wenn Sie sich also nicht mit Frameworks auseinandersetzen, können Sie dies am besten tun, indem Sie Ihre eigene document.onload-Warteschlange implementieren.

Wenn Sie sich nicht mit Frameworks auseinandersetzen, sollten Sie jQuery und document.ready , Prototype und dom: loaded , Dojo und addOnLoad oder Google für Ihr Framework betrachten ] und "document ready".

Wenn Sie kein Framework ausgewählt haben, aber Interesse haben, ist jQuery ein guter Ausgangspunkt. Es ändert nichts an der Grundfunktionalität von Javascript und wird Ihnen generell aus dem Weg gehen, damit Sie die Dinge nach Belieben ausführen können, wann immer Sie möchten. 

10
Alan Storm

Die window.onload -Ereignisse werden bei mehreren Erstellungen überschrieben. Verwenden Sie zum Anhängen von Funktionen den Window.addEventListener (W3C-Standard) oder window.attachEvent (für IE). Verwenden Sie den folgenden Code, der funktioniert hat. 

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
10
Devaroop

Joomla wird mit MooTools ausgeliefert. Daher ist es am einfachsten, die MooTools-Bibliothek für Ihren zusätzlichen Code zu verwenden. MooTools wird mit einem benutzerdefinierten Ereignis namens "domready" ausgeliefert, das ausgelöst wird, wenn die Seite geladen wird und die Dokumentstruktur analysiert wird.

window.addEvent( domready, function() { code to execute on load here } );

Weitere Informationen zu MooTools finden Sie hier . Joomla 1.5 wird derzeit mit MT1.1 ausgeliefert, während Joomla 1.6 alpha MT1.2 enthalten wird

2
Arlen

Ich persönlich bevorzuge diese Methode . Es erlaubt Ihnen nicht nur mehrere onload-Funktionen, sondern wenn ein Skript es definiert hat vorher Sie haben es verstanden, ist diese Methode nett genug, um damit umzugehen ... Das einzige Problem, das bleibt, ist eine Seite lädt mehrere Skripte, die die Funktion window.addLoad() nicht verwenden; aber das ist ihr problem :).

P.S. Es ist auch toll, wenn Sie später weitere Funktionen "verketten" möchten.

1
Mike

Dies ist der schmutzige, aber kürzere Weg: P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )
1
Aamir Afridi

Da ich jQuery/bootstrap-JS-Dateien immer am Ende des Dokuments anhebe und keinen Zugriff auf $ über das Dokument habe, habe ich ein kleines "init" -Plugin entwickelt, das ein einziges JS-Skript ist, das ich ganz oben auf meinen Seiten einfüge:

window.init = new function() {
    var list = [];

    this.Push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.Push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.Push(window.onload);
        }
        window.onload = this.run;
    }
};

Damit kann ich jeden anonymen Loader über die Seite definieren, bevor jQuery und Bootstrap eingefügt werden, und sicherstellen, dass er ausgelöst wird, sobald jQuery vorhanden ist:

init.Push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});
0
yergo