JavaScript-Ereignis zur Größenänderung des Fensters

Question

Wie kann ich mich in ein Ereignis zur Größenänderung eines Browserfensters einklinken?

があります。 eine jQuery-Methode zum Abhören von Größenänderungsereignissen aber ich würde es vorziehen, es nicht nur für diese eine Anforderung in mein Projekt einzubringen.

Answer 1

Am besten ist es, das Größenänderungsereignis zu ergänzen, anstatt es zu ersetzen:

window.addEventListener('resize', function(event) {
    ...
}, true);

Eine Alternative besteht darin, einen einzigen Handler für das DOM-Ereignis zu erstellen (es kann jedoch nur einen geben), z. B.

window.onresize = function(event) {
    ...
};

ジャクエリ Mai tun einige Arbeit, um sicherzustellen, dass die Größe Ereignis konsequent in allen Browsern ausgelöst wird, aber ich bin nicht sicher, ob einer der Browser unterscheiden, aber ich würde Sie ermutigen, in Firefox, Safari und IE zu testen.

Answer 2

Zunächst einmal weiß ich, dass die addEventListener Methode wurde in den Kommentaren oben erwähnt, aber ich habe keinen Code gesehen. Da dies der bevorzugte Ansatz ist, hier ist er:

window.addEventListener('resize', function(event){
  // do stuff here
});

Hier ist ein Arbeitsbeispiel .

Answer 3

Überschreiben Sie niemals die Funktion window.onresize.

Erstellen Sie stattdessen eine Funktion, um dem Objekt oder Element einen Ereignis-Listener hinzuzufügen. Diese prüft, ob die Listener funktionieren, und überschreibt als letzten Ausweg die Funktion des Objekts. Dies ist die bevorzugte Methode, die in Bibliotheken wie jQuery verwendet wird.

object Element oder Fenster: das Element oder Fensterobjekt
type Größe ändern, scrollen (Ereignistyp)
callback : die Funktionsreferenz

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

Die Verwendung ist dann wie folgt:

addEvent(window, "resize", function_reference);

oder mit einer anonymen Funktion:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

Answer 4

Lösung für 2018+:

Sie sollten Folgendes verwenden ResizeObserver . Es ist eine browser-native Lösung, die eine viel bessere Leistung hat als die Verwendung des resize Veranstaltung. Darüber hinaus unterstützt es nicht nur das Ereignis auf der document sondern auch auf willkürliche elements .

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Derzeit, Firefox, Chrome, Safari und Edge unterstützen es . Bei anderen (und älteren) Browsern müssen Sie eine Polyfill .

Answer 5

Das Resize-Ereignis sollte niemals direkt verwendet werden, da es bei der Größenänderung kontinuierlich ausgelöst wird.

Verwenden Sie eine Entprellungsfunktion, um die übermäßigen Anrufe zu verringern.

window.addEventListener('resize',debounce(handler, delay, immediate),false);

Hier ist eine gängige Entprellung, die im Netz kursiert, aber es gibt auch fortgeschrittenere Entprellungen, die in Lodash enthalten sind.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Dies kann wie folgt verwendet werden...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

Es wird nie mehr als einmal alle 200ms ausgelöst.

Für mobile Orientierungsänderungen verwenden:

window.addEventListener('orientationchange', () => console.log('hello'), false);

Hier ist ein kleine Bibliothek Ich habe mich zusammengesetzt, um das ordentlich zu erledigen.