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

Question

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

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

Answer 1

jQuery simplemente está envolviendo el evento DOM resize estándar, por ejemplo.

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

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

Answer 2

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 : redimensionar, 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');
});

Answer 3

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

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

Aquí hay una muestra de trabajo .

Answer 4

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 ('cambiar tamaño', debounce (manejador, retraso, inmediato), falso);

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

Answer 5

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 use object como nombre de parámetro. Es una palabra reservada. Dicho esto, la función proporcionada por @Alex V no funcionará en modo estricto .

2. La función addEvent proporcionada por @Alex V no devuelve el objeto de evento si se usa el método addEventListener . Se debe agregar otro parámetro a la función addEvent para permitir esto.

NOTA: El nuevo parámetro para addEvent se 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 función actualizada addEvent 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;
};

Una llamada de ejemplo a la nueva función 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

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 ventana estándar, encontrará que en IE, el evento se dispara una vez por cada X y una vez por cada movimiento del eje Y, lo que resulta en una tonelada de eventos que podrían dispararse, lo que podría tener un impacto en el rendimiento de 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.

Answer 7

Solución para 2018+:

Debe usar ResizeObserver . Será una solución nativa del navegador que tiene un rendimiento mucho mejor que usar el evento resize . Además, no solo admite el evento en el documento sino también en los elementos arbitrarios de .

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, solo Chrome lo admite, pero es probable que otros navegadores lo sigan (pronto). Por ahora debe usar un polyfill .

Answer 8

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

Answer 9

La siguiente publicación de blog puede serle útil: Arreglando 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);
}

Answer 10

Las soluciones mencionadas anteriormente funcionarán si todo lo que quiere 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();
});

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>