Wie kann ich mich in ein Browserfenster einbinden, um die Größe zu ändern?
Es gibt eine jQuery-Methode, um auf Größenänderungsereignisse zu warten, aber ich würde es vorziehen, sie nicht nur für diese eine Anforderung in mein Projekt aufzunehmen.
javascript
dom-events
window-resize
Toter Account
quelle
quelle
Antworten:
jQuery verpackt nur das Standard-
resize
DOM-Ereignis, z.jQuery kann einige Arbeiten ausführen, um sicherzustellen, dass das Größenänderungsereignis in allen Browsern konsistent ausgelöst wird. Ich bin mir jedoch nicht sicher, ob sich einer der Browser unterscheidet. Ich möchte Sie jedoch dazu ermutigen, Tests in Firefox, Safari und IE durchzuführen.
quelle
window.addEventListener('resize', function(){}, true);
window.onresize = () => { /* code */ };
oder besser:window.addEventListener('resize', () => { /* code */ });
Zunächst einmal weiß ich, dass die
addEventListener
Methode in den obigen Kommentaren erwähnt wurde, aber ich habe keinen Code gesehen. Da es der bevorzugte Ansatz ist, ist es hier:Hier ist ein Arbeitsbeispiel .
quelle
removeEventListener
.Überschreiben Sie niemals die Funktion window.onresize.
Erstellen Sie stattdessen eine Funktion, um dem Objekt oder Element einen Ereignis-Listener hinzuzufügen. Dies überprüft und falls die Listener nicht funktionieren, überschreibt es die Funktion des Objekts als letzten Ausweg. Dies ist die bevorzugte Methode, die in Bibliotheken wie jQuery verwendet wird.
object
: das Element oder Fensterobjekttype
: Größe ändern, scrollen (Ereignistyp)callback
: die FunktionsreferenzDann ist die Verwendung wie folgt:
oder mit einer anonymen Funktion:
quelle
attachEvent
nicht mehr unterstützt wird. Der bevorzugte Weg für die Zukunft istaddEventListener
.elem == undefined
. Es ist möglich (obwohl unwahrscheinlich), dass "undefiniert" lokal als etwas anderes definiert ist. stackoverflow.com/questions/8175673/…Das Größenänderungsereignis sollte niemals direkt verwendet werden, da es während der Größenänderung kontinuierlich ausgelöst wird.
Verwenden Sie eine Entprellungsfunktion, um die überschüssigen Anrufe zu verringern.
window.addEventListener('resize',debounce(handler, delay, immediate),false);
Hier ist ein allgemeines Debounce, das im Netz herumschwirrt, aber suchen Sie nach fortgeschritteneren als featuerd in lodash.
Dies kann so verwendet werden ...
Es wird nie mehr als einmal alle 200 ms abgefeuert.
Für Änderungen der mobilen Ausrichtung verwenden Sie:
Hier ist eine kleine Bibliothek, die ich zusammengestellt habe, um das ordentlich zu erledigen.
quelle
(...arguments) => {...}
(oder...args
für weniger Verwirrung) vorhanden sein, da diearguments
Variable ihren Gültigkeitsbereich nicht mehr verfügbar hat.Lösung für 2018+:
Sie sollten ResizeObserver verwenden . Es ist eine browser-native Lösung, die eine viel bessere Leistung bietet als die Verwendung des
resize
Ereignisses. Darüber hinaus unterstützt es nicht nur das Ereignis auf der,document
sondern auch auf beliebigeelements
.Derzeit unterstützen dies Firefox, Chrome und Safari . Für andere (und ältere) Browser müssen Sie eine Polyfüllung verwenden .
quelle
Ich glaube, dass @Alex V bereits die richtige Antwort gegeben hat, aber die Antwort muss modernisiert werden, da sie jetzt über fünf Jahre alt ist.
Es gibt zwei Hauptprobleme:
Niemals
object
als Parametername verwenden. Es ist ein reserviertes Wort. Wenn dies gesagt wird, funktioniert die von @Alex V bereitgestellte Funktion nichtstrict mode
.Die
addEvent
von @Alex V bereitgestellte Funktion gibt nicht zurück,event object
wenn dieaddEventListener
Methode verwendet wird.addEvent
Um dies zu ermöglichen, sollte der Funktion ein weiterer Parameter hinzugefügt werden .HINWEIS: Der neue Parameter to
addEvent
wurde optional gemacht, damit durch die Migration auf diese neue Funktionsversion keine vorherigen Aufrufe dieser Funktion unterbrochen werden. Alle älteren Verwendungen werden unterstützt.Hier ist die aktualisierte
addEvent
Funktion mit diesen Änderungen:Ein Beispielaufruf für die neue
addEvent
Funktion:quelle
Vielen Dank, dass Sie auf meinen Blog-Beitrag unter http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html verwiesen haben .
Während Sie sich einfach mit dem Standardereignis zum Ändern der Fenstergröße verbinden können, werden Sie feststellen, dass das Ereignis im IE einmal für jede X- und einmal für jede Y-Achsenbewegung ausgelöst wird, was dazu führt, dass eine Menge Ereignisse ausgelöst werden, die möglicherweise eine Leistung haben Auswirkungen auf Ihre Website, wenn das Rendern eine intensive Aufgabe ist.
Meine Methode beinhaltet eine kurze Zeitüberschreitung, die bei nachfolgenden Ereignissen abgebrochen wird, damit das Ereignis nicht in Ihren Code gesprudelt wird, bis der Benutzer die Größe des Fensters geändert hat.
quelle
quelle
Der folgende Blog-Beitrag kann für Sie hilfreich sein: Beheben des Ereignisses zur Größenänderung des Fensters im IE
Es bietet diesen Code:
quelle
Die oben bereits erwähnten Lösungen funktionieren, wenn Sie nur die Größe des Fensters und des Fensters ändern möchten. Wenn Sie jedoch möchten, dass die Größenänderung an untergeordnete Elemente weitergegeben wird, müssen Sie das Ereignis selbst weitergeben. Hier ist ein Beispielcode dafür:
Beachten Sie, dass ein untergeordnetes Element aufrufen kann
für das Ereignisobjekt, das als erstes Arg des Größenänderungsereignisses übergeben wird. Zum Beispiel:
quelle
quelle
quelle