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

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.

jQuery verpackt nur das Standard- resizeDOM-Ereignis, z.

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

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.

Zunächst einmal weiß ich, dass die addEventListenerMethode in den obigen Kommentaren erwähnt wurde, aber ich habe keinen Code gesehen. Da es der bevorzugte Ansatz ist, ist es hier:

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

Hier ist ein Arbeitsbeispiel .

Ü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 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;
    }
};

Dann ist die Verwendung wie folgt:

addEvent(window, "resize", function_reference);

oder mit einer anonymen Funktion:

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

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.

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 so verwendet werden ...

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

Es wird nie mehr als einmal alle 200 ms abgefeuert.

Für Änderungen der mobilen Ausrichtung verwenden Sie:

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

Hier ist eine kleine Bibliothek, die ich zusammengestellt habe, um das ordentlich zu erledigen.

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 resizeEreignisses. Darüber hinaus unterstützt es nicht nur das Ereignis auf der, documentsondern auch auf beliebige 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 unterstützen dies Firefox, Chrome und Safari . Für andere (und ältere) Browser müssen Sie eine Polyfüllung verwenden .

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:

1. Niemals objectals Parametername verwenden. Es ist ein reserviertes Wort. Wenn dies gesagt wird, funktioniert die von @Alex V bereitgestellte Funktion nicht strict mode.

2. Die addEventvon @Alex V bereitgestellte Funktion gibt nicht zurück, event objectwenn die addEventListenerMethode verwendet wird. addEventUm dies zu ermöglichen, sollte der Funktion ein weiterer Parameter hinzugefügt werden .

HINWEIS: Der neue Parameter to addEventwurde 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 addEventFunktion mit diesen Änderungen:

/*
    function: addEvent

    @param: obj         (Object)(Required)

        -   The object which you wish
            to attach your event to.

    @param: type        (String)(Required)

        -   The type of event you
            wish to establish.

    @param: callback    (Function)(Required)

        -   The method you wish
            to be called by your
            event listener.

    @param: eventReturn (Boolean)(Optional)

        -   Whether you want the
            event object returned
            to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
    if(obj == null || typeof obj === 'undefined')
        return;

    if(obj.addEventListener)
        obj.addEventListener(type, callback, eventReturn ? true : false);
    else if(obj.attachEvent)
        obj.attachEvent("on" + type, callback);
    else
        obj["on" + type] = callback;
};

Ein Beispielaufruf für die neue addEventFunktion:

var watch = function(evt)
{
    /*
        Older browser versions may return evt.srcElement
        Newer browser versions should return evt.currentTarget
    */
    var dimensions = {
        height: (evt.srcElement || evt.currentTarget).innerHeight,
        width: (evt.srcElement || evt.currentTarget).innerWidth
    };
};

addEvent(window, 'resize', watch, true);

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.

window.onresize = function() {
    // your code
};

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:

Sys.Application.add_load(function(sender, args) {
    $addHandler(window, 'resize', window_resize);
});

var resizeTimeoutId;

function window_resize(e) {
     window.clearTimeout(resizeTimeoutId);
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}

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:

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

Beachten Sie, dass ein untergeordnetes Element aufrufen kann

 event.preventDefault();

für das Ereignisobjekt, das als erstes Arg des Größenänderungsereignisses übergeben wird. Zum Beispiel:

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>

var EM = new events_managment();

EM.addEvent(window, 'resize', function(win,doc, event_){
    console.log('resized');
    //EM.removeEvent(win,doc, event_);
});

function events_managment(){
    this.events = {};
    this.addEvent = function(node, event_, func){
        if(node.addEventListener){
            if(event_ in this.events){
                node.addEventListener(event_, function(){
                    func(node, event_);
                    this.events[event_](win_doc, event_);
                }, true);
            }else{
                node.addEventListener(event_, function(){
                    func(node, event_);
                }, true);
            }
            this.events[event_] = func;
        }else if(node.attachEvent){

            var ie_event = 'on' + event_;
            if(ie_event in this.events){
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                    this.events[ie_event]();
                });
            }else{
                node.attachEvent(ie_event, function(){
                    func(node, ie_event);
                });
            }
            this.events[ie_event] = func;
        }
    }
    this.removeEvent = function(node, event_){
        if(node.removeEventListener){
            node.removeEventListener(event_, this.events[event_], true);
            this.events[event_] = null;
            delete this.events[event_];
        }else if(node.detachEvent){
            node.detachEvent(event_, this.events[event_]);
            this.events[event_] = null;
            delete this.events[event_];
        }
    }
}