Evento di ridimensionamento della finestra JavaScript

Question

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

C'è un modo jQuery di ascoltare eventi di ridimensionamento ma io preferirei non inserirlo nel mio progetto solo per questo requisito.

Answer 1

jQuery sta semplicemente eseguendo il wrapping dell'evento DOM resize standard, ad es.

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

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

Answer 2

Non sovrascrivere 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.

oggetto : l'elemento o l'oggetto finestra
type : ridimensiona, scorri (tipo di 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');
});

Answer 3

Prima di tutto, so che il metodo addEventListener è stato menzionato nei commenti sopra, ma non ho visto alcun codice. Poiché è l'approccio preferito, eccolo qui:

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

Ecco un esempio funzionante .

Answer 4

L'evento di ridimensionamento non dovrebbe mai essere usato direttamente poiché viene generato continuamente mentre ridimensioniamo.

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

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

Ecco un rimbalzo comune che fluttua 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 occuparmi di questo ordinatamente.

Answer 5

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

Esistono due problemi principali:

1. Non usare mai oggetto come nome di parametro. È una parola riservata. Detto questo, la funzione fornita da @Alex V non funzionerà in modalità rigorosa .

2. La funzione addEvent fornita da @Alex V non restituisce oggetto evento se viene utilizzato il metodo addEventListener . Un altro parametro dovrebbe essere aggiunto alla funzione addEvent 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 funzione addEvent 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;
};

Un esempio di chiamata alla nuova funzione 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);

Answer 6

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 potrebbero essere generati influire sul rendimento del 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.

Answer 7

Soluzione per il 2018+:

Devi utilizzare ResizeObserver . Sarà una soluzione nativa del browser con prestazioni molto migliori rispetto all'utilizzo dell'evento ridimensionare . Inoltre, supporta non solo l'evento sul documento ma anche su elementi arbitrari

.

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, solo Chrome lo supporta, ma probabilmente seguiranno altri browser (presto). Per ora devi usare un polyfill .

Answer 8

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

Answer 9

Il seguente post sul blog può esserti utile: Correzione dell'evento di ridimensionamento della finestra in Internet Explorer

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

Answer 10

Le soluzioni già menzionate sopra 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 un esempio 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);
});

Nota che un elemento figlio può chiamare

 event.preventDefault();

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

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>