Evento de cambio de tamaño de la ventana de JavaScript

¿Cómo puedo conectarme a un evento de cambio de tamaño de la ventana del navegador?

Hay una forma de escuchar jQuery para eventos de cambio de tamaño, pero preferiría no incluirlo en mi proyecto solo por este requisito.

jQuery solo está envolviendo el resizeevento DOM estándar , por ejemplo.

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

jQuery puede hacer algo de trabajo para asegurarse de que el evento de cambio de tamaño se active de manera consistente en todos los navegadores, pero no estoy seguro de si alguno de los navegadores difiere, pero le animo a que pruebe en Firefox, Safari e IE.

En primer lugar, sé que el addEventListenermétodo se ha mencionado en los comentarios anteriores, pero no vi ningún código. Como es el enfoque preferido, aquí está:

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

Aquí hay una muestra de trabajo .

Nunca anule la función window.onresize.

En su lugar, cree una función para agregar un escucha de eventos al objeto o elemento. Esto comprueba y en caso de que los oyentes no funcionen, luego anula la función del objeto como último recurso. Este es el método preferido utilizado en bibliotecas como jQuery.

object: el elemento u objeto de ventana
type: cambiar el tamaño, desplazarse (tipo de evento)
callback: la referencia de función

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

Entonces el uso es así:

addEvent(window, "resize", function_reference);

o con una función anónima:

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

El evento de cambio de tamaño nunca debe usarse directamente, ya que se activa continuamente a medida que cambiamos el tamaño.

Use una función antirrebote para mitigar el exceso de llamadas.

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

Aquí hay un rebote común que flota alrededor de la red, aunque busca otros más avanzados como 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);
    };
};

Esto se puede usar así ...

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

Nunca disparará más de una vez cada 200 ms.

Para cambios de orientación móvil, use:

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

Aquí hay una pequeña biblioteca que reuní para ocuparme de esto cuidadosamente.

Solución para 2018+:

Debe usar ResizeObserver . Es una solución nativa del navegador que tiene un rendimiento mucho mejor que usar el resizeevento. Además, no solo admite el evento en el documentsino también en 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);

Actualmente, Firefox, Chrome y Safari lo admiten . Para otros navegadores (y más antiguos) debe usar un polyfill .

Creo que @Alex V ya proporcionó la respuesta correcta, pero la respuesta requiere cierta modernización, ya que tiene más de cinco años.

Hay dos problemas principales:

1. Nunca lo use objectcomo nombre de parámetro. Es una palabra reservada. Dicho esto, la función proporcionada por @Alex V no funcionará strict mode.

2. La addEventfunción proporcionada por @Alex V no devuelve event objectsi addEventListenerse usa el método. Se debe agregar otro parámetro a la addEventfunción para permitir esto.

NOTA: El nuevo parámetro to addEventse ha hecho opcional para que la migración a esta nueva versión de función no interrumpa ninguna llamada previa a esta función. Todos los usos heredados serán compatibles.

Aquí está la addEventfunción actualizada con estos cambios:

/*
    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 ejemplo de llamada a la nueva addEventfunción:

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

Gracias por hacer referencia a mi publicación de blog en http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .

Si bien puede conectarse al evento de cambio de tamaño de la ventana estándar, encontrará que en IE, el evento se dispara una vez por cada movimiento X y una vez por cada movimiento del eje Y, lo que resulta en una tonelada de eventos que pueden tener un rendimiento impacto en su sitio si la representación es una tarea intensiva.

Mi método implica un breve tiempo de espera que se cancela en los eventos posteriores para que el evento no aparezca en su código hasta que el usuario haya terminado de cambiar el tamaño de la ventana.

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

La siguiente publicación de blog puede serle útil: Arreglar el evento de cambio de tamaño de ventana en IE

Proporciona este código:

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

Las soluciones mencionadas anteriormente funcionarán si todo lo que desea hacer es cambiar el tamaño de la ventana y solo la ventana. Sin embargo, si desea que el cambio de tamaño se propague a elementos secundarios, deberá propagar el evento usted mismo. Aquí hay un código de ejemplo para hacerlo:

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

Tenga en cuenta que un elemento hijo puede llamar

 event.preventDefault();

en el objeto de evento que se pasa como el primer Arg del evento de cambio de tamaño. Por ejemplo:

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