JavaScript Fenster Grßenänderungsereignis

Question

Wie kann ich in einem Browser-Fenster Grßenänderungsereignis Haken?

Es gibt einen jQuery Weg für Resize Ereignisse hören aber ich würde es vorziehen, es nicht in mein Projekt für nur diese eine Anforderung zu bringen.

Answer 1

jQuery ist nur das Standard-resize DOM-Ereignis Einwickeln, zB.

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

jQuery können tun einige Arbeit, um sicherzustellen, dass das Resize-Ereignis in allen Browsern konsequent gefeuert wird, aber ich bin nicht sicher, ob eine der Browser unterscheiden, aber ich würde Sie ermutigen, in testen Firefox, Safari und IE.

Answer 2

Sie niemals die window.onresize Funktion außer Kraft setzen.

Erstellen Sie stattdessen eine Funktion ein Ereignis-Listener für das Objekt oder Element hinzuzufügen. Diese Kontrollen und einhüllen die Zuhörer nicht funktionieren, dann ist es die Aufgabe der Funktion als letztes Mittel außer Kraft setzt. Dies ist die bevorzugte Methode in Bibliotheken wie jQuery.

object: das Element oder Fensterobjekt
type: Größe ändern, blättern (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 wie folgt verwendet werden:

addEvent(window, "resize", function_reference);

oder mit einer anonymen Funktion:

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

Answer 3

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

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

Hier ist eine Arbeitsprobe .

Answer 4

Das Resize-Ereignis sollte nie direkt verwendet werden, da es kontinuierlich gebrannt wird, wie wir ändern.

Verwenden Sie eine Entprellfunktion die überschüssigen Anrufe zu verringern.

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

Hier ist ein gemeinsames debounce um das Netz schwimmen, sucht jedoch für 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 wie so verwendet werden ...

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

Es wird nie mehr Feuer einmal als alle 200ms.

Für mobile Orientierungsänderungen verwenden:

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

Hier ist ein ich dies zusammen zu nehmen setzen Pflege ordentlich.

Answer 5

Ich glaube, dass die richtige Antwort bereits von @ Alex V zur Verfügung gestellt worden, doch die Antwort eine gewisse Modernisierung erfordert, wie es über fünf Jahre alt geworden ist.

Es gibt zwei Hauptthemen:

1. Nie object als Parameternamen verwenden. Es ist ein reservered Wort. Mit diesem wird gesagt, wird @ Alex V bereitgestellte Funktion nicht in strict mode arbeiten.

2. Die addEvent Funktion von @ Alex V bereitgestellt kehrt nicht die event object wenn die addEventListener Methode verwendet wird. Ein weiterer Parameter soll auf die addEvent Funktion hinzugefügt werden, um dies zu ermöglichen.

Hinweis: Die neuen Parameter addEvent wurde optional gemacht, so dass auf diese neue Funktion Version der Migration werden alle vorherigen Anrufe an diese Funktion nicht brechen. Alle Legacy-Anwendungen unterstützt werden.

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

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

Answer 6

Vielen Dank für die Referenzierung in meinem Blogbeitrag unter http :. //mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Während Sie gerade zum Standardfenster Grßenänderungsereignis anschließen können, Sie, dass im Internet Explorer finden, wird das Ereignis einmal für jeden X gefeuert und einmal für jede Y-Achsen-Bewegung, in einer Tonne von Ereignissen resultieren gefeuert die Macht haben eine Auswirkung auf die Leistung auf Ihrer Website, wenn Rendering eine intensive Aufgabe.

Meine Methode beinhaltet eine kurze Auszeit, die auf spätere Ereignisse abgebrochen wird, so dass die Veranstaltung, um Ihren Code erhalten nicht sprudelte, bis der Benutzer die Größe des Fensters beendet ist.

Answer 7

Lösung für 2018 +:

Sie sollten verwenden ResizeObserver . Es wird ein Browser-native Lösung sein, die eine viel bessere Leistung als verwenden, um das resize Ereignis hat. Darüber hinaus unterstützt es nicht nur die Veranstaltung auf dem document sondern auch auf 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);

Zur Zeit sind nur Chrome unterstützt es aber andere Browser wird wahrscheinlich folgen (bald). Vorerst müssen Sie eine polyfill .

Answer 8

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

Answer 9

In der folgenden Blog-Post kann Ihnen nützlich sein: Befestigung der Fenster Ereignis in IE Größe ändern

Es gibt 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);
}

Answer 10

Die bereits oben genannten Lösungen wird funktionieren, wenn alles, was Sie tun wollen nur das Fenster und Fenster ist die Größe. Wenn Sie jedoch die Größe ändern propagiert Kind-Elemente haben wollen, müssen Sie das Ereignis selbst verbreiten. Hier einige Beispiel-Code, es zu tun:

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

 event.preventDefault();

auf dem Ereignisobjekt, das als erstes Arg des Resize-Ereignis übergeben wird. Zum Beispiel:

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

Answer 11

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_];
        }
    }
}

Answer 12

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

</script>