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

jquery

Question

¿Cómo puedo enlazar en 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 preferiría no incluirlo en mi proyecto solo por este requisito.

Answer 1

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

Hay dos cuestiones principales:

1. Nunca use el object como un nombre de parámetro. Es una palabra reservada. Dicho esto, la función provista de @Alex V no funcionará en strict mode .

2. La función addEvent proporcionada por @Alex V no devuelve el event object 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 addEvent 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 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 2

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

Utilice una función de rebote para mitigar el exceso de llamadas.

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

Aquí hay una declaración común que flota alrededor de la red, aunque busque otras más avanzadas 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 puede ser usado como ...

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 armé para cuidar de esto cuidadosamente.

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. Ya que es el enfoque preferido, aquí está:

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

Aquí hay una muestra de trabajo .

Answer 4

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

Si bien puede simplemente 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 X y una vez por cada movimiento del eje Y, lo que da como resultado 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 eventos subsiguientes para que el evento no llegue a su código hasta que el usuario haya terminado de cambiar el tamaño de la ventana.

Answer 5

La siguiente publicación del blog puede ser útil para usted: http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

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 6

Las soluciones mencionadas anteriormente funcionarán si todo lo que desea hacer es cambiar el tamaño de la ventana solamente. Sin embargo, si desea que el 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 resize. Por ejemplo:

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

Answer 7

Nunca anule la función window.onresize.

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

object : el object elemento o ventana
type : redimensionar, desplazarse (tipo de evento)
callback : la referencia de la 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 8

Solución para 2018+:

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

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 otros navegadores probablemente lo seguirán (pronto) Por ahora tienes que usar un polyfill .

Answer 9

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

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

jQuery puede hacer un poco de trabajo para garantizar que el evento de cambio de tamaño se dispare de manera consistente en todos los navegadores, pero no estoy seguro de que alguno de los navegadores sea diferente, pero lo aliento a probar en Firefox, Safari e IE.

Answer 10

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

Answer 11

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

</script>

Answer 12

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