webentwicklung-frage-antwort-db.com.de

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

Wie kann ich mich in ein Browserfenster einbinden, um die Größe des Ereignisses zu ändern?

Es gibt eine jQuery-Methode zum Abhören von Größenänderungsereignissen , aber ich würde es vorziehen, sie nicht nur für diese eine Anforderung in mein Projekt aufzunehmen.

javascriptjavascript-eventswindow-resize
577
Dead account

jQuery bricht nur das Standard-DOM-Ereignis resize ab, 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 die Browser unterscheiden. Ich empfehle Ihnen jedoch, in Firefox, Safari, zu testen und IE.

610
olliej

Überschreiben Sie niemals die Funktion window.onresize.

Erstellen Sie stattdessen eine Funktion, um dem Objekt oder Element einen Ereignis-Listener hinzuzufügen. Dadurch wird überprüft, ob die Listener nicht funktionieren, und die Funktion des Objekts als letzter Ausweg wird überschrieben. 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');
});
512
Alex V

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

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

Hier ist ein Arbeitsbeispiel .

500
Jondlm

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 abzumildern.

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

Hier ist ein allgemeines Debounce, das im Netz herumschwirrt, obwohl Sie nach fortgeschritteneren als featuerd in lodash Ausschau halten.

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 200ms ausgelöst.

Für mobile Orientierungsänderungen verwenden Sie:

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

Hier ist eine kleine Bibliothek Ich habe sie zusammengestellt, um mich ordentlich darum zu kümmern.

29
Undefined

Ich glaube, dass die richtige Antwort bereits von @Alex V geliefert wurde, aber die Antwort muss modernisiert werden, da sie jetzt über fünf Jahre alt ist.

Es gibt zwei Hauptprobleme:

  1. Verwenden Sie niemals object als Parameternamen. Es ist ein reserviertes Wort. In diesem Fall funktioniert die von @Alex V bereitgestellte Funktion in strict mode nicht.

  2. Die von @Alex V bereitgestellte Funktion addEvent gibt den event object nicht zurück, wenn die Methode addEventListener verwendet wird. Ein weiterer Parameter sollte zur Funktion addEvent hinzugefügt werden, um dies zu ermöglichen.

HINWEIS: Der neue Parameter für addEvent wurde optional gemacht, damit bei der Migration auf diese neue Funktionsversion keine vorherigen Aufrufe dieser Funktion unterbrochen werden. Alle älteren Verwendungen werden unterstützt.

Hier ist die aktualisierte Funktion addEvent 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 der neuen Funktion addEvent:

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);
15
WebWanderer

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 an das Standard-Fenstergrößenänderungsereignis anschließen 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 Tonne von Ereignissen ausgelöst wird, 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, sodass das Ereignis erst dann in Ihren Code sprudelt, wenn der Benutzer die Größe des Fensters geändert hat.

12
Steven

Lösung für 2018 +:

Sie sollten ResizeObserver verwenden. Es wird eine browser-native Lösung sein, die eine viel bessere Leistung aufweist als die Verwendung des Ereignisses resize. Außerdem unterstützt es nicht nur das Ereignis auf dem document, sondern auch auf einem beliebigen 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 nur Chrome unterstützt dies, andere Browser werden jedoch wahrscheinlich folgen (bald). Für den Moment muss ein Polyfill verwendet werden.

11
str
window.onresize = function() {
    // your code
};
8
saravanakumar

Der folgende Blog-Beitrag kann für Sie nützlich sein: Beheben des Fensterveränderungsereignisses 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);
}
6
lakshmanaraj

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 die Größenänderung auf untergeordnete Elemente übertragen möchten, müssen Sie das Ereignis selbst übertragen. 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();
});
2
rysama
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_];
        }
    }
}
1
THE AMAZING
<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>
0
Rob Herring