Evento di ridimensionamento della finestra JavaScript

Come posso collegarmi a un evento di ridimensionamento della finestra del browser?

Esiste un modo jQuery di ascoltare gli eventi di ridimensionamento, ma preferirei non inserirlo nel mio progetto solo per questo requisito.

jQuery sta semplicemente avvolgendo l' resizeevento DOM standard , ad es.

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

jQuery potrebbe fare un po 'di lavoro per garantire che l'evento di ridimensionamento venga attivato costantemente in tutti i browser, ma non sono sicuro che qualcuno dei browser differisca, ma ti incoraggio a testare in Firefox, Safari e IE.

Prima di tutto, so che il addEventListenermetodo è stato menzionato nei commenti sopra, ma non ho visto alcun codice. Dal momento che è l'approccio preferito, eccolo qui:

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

Ecco un esempio funzionante .

Non ignorare mai la funzione window.onresize.

Invece, crea una funzione per aggiungere un listener di eventi all'oggetto o all'elemento. Questo verifica e incase che gli ascoltatori non funzionano, quindi sovrascrive la funzione dell'oggetto come ultima risorsa. Questo è il metodo preferito utilizzato in librerie come jQuery.

object: l'elemento o l'oggetto finestra
type: ridimensiona, scorri (tipo evento)
callback: il riferimento della funzione

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

Quindi usare è così:

addEvent(window, "resize", function_reference);

o con una funzione anonima:

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

L'evento di ridimensionamento non deve mai essere utilizzato direttamente in quanto viene generato continuamente durante il ridimensionamento.

Utilizzare una funzione di debounce per mitigare le chiamate in eccesso.

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

Ecco un rimbalzo comune che galleggia intorno alla rete, anche se cerca quelli più avanzati come 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);
    };
};

Questo può essere usato così ...

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

Non sparerà mai più di una volta ogni 200 ms.

Per le modifiche all'orientamento mobile utilizzare:

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

Ecco una piccola biblioteca che ho messo insieme per occuparmene in modo chiaro.

Soluzione per il 2018+:

Dovresti usare ResizeObserver . È una soluzione nativa del browser che offre prestazioni molto migliori rispetto all'utilizzo resizedell'evento. Inoltre, supporta non solo l'evento sul documentma anche su arbitrario 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);

Attualmente, Firefox, Chrome e Safari lo supportano . Per altri browser (e precedenti) è necessario utilizzare un polyfill .

Credo che la risposta corretta sia già stata fornita da @Alex V, eppure la risposta richiede un po 'di modernizzazione poiché ormai ha più di cinque anni.

Esistono due problemi principali:

1. Non usare mai objectcome nome di parametro. È una parola riservata. Detto questo, la funzione fornita da @Alex V non funzionerà strict mode.

2. La addEventfunzione fornita da @Alex V non restituisce event objectse addEventListenerviene utilizzato il metodo. Un altro parametro deve essere aggiunto alla addEventfunzione per consentire ciò.

NOTA: il nuovo parametro su addEventè stato reso facoltativo in modo che la migrazione a questa nuova versione della funzione non interrompa le chiamate precedenti a questa funzione. Saranno supportati tutti gli usi legacy.

Ecco la addEventfunzione aggiornata con queste modifiche:

/*
    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;
};

Una chiamata di esempio alla nuova addEventfunzione:

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

Grazie per aver fatto riferimento al mio post sul blog all'indirizzo http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Mentre puoi semplicemente collegarti all'evento standard di ridimensionamento della finestra, scoprirai che in IE, l'evento viene generato una volta per ogni X e una volta per ogni movimento dell'asse Y, risultando in una tonnellata di eventi che possono essere esibiti impatto sul tuo sito se il rendering è un'attività intensiva.

Il mio metodo prevede un breve timeout che viene annullato su eventi successivi in ​​modo che l'evento non venga confuso con il codice fino a quando l'utente non ha terminato il ridimensionamento della finestra.

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

Il seguente post di blog può esserti utile: Correggere l'evento di ridimensionamento della finestra in IE

Fornisce questo codice:

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

Le soluzioni sopra menzionate funzioneranno se tutto ciò che vuoi fare è ridimensionare solo la finestra e la finestra. Tuttavia, se si desidera che il ridimensionamento sia propagato agli elementi figlio, è necessario propagare l'evento da soli. Ecco alcuni esempi di codice per farlo:

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

Si noti che un elemento figlio può chiamare

 event.preventDefault();

sull'oggetto evento che viene passato come primo Arg dell'evento di ridimensionamento. Per esempio:

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