Evento de cambio de tamaño de la ventana del navegador cruzado - JavaScript / jQuery


240

¿Cuál es el método correcto (moderno) para aprovechar el evento de cambio de tamaño de ventana que funciona en Firefox, WebKit e Internet Explorer?

¿Y puede activar / desactivar ambas barras de desplazamiento?


También estoy investigando esto. Me gustaría intentar aplicar las soluciones ofrecidas aquí, pero me temo que no entiendo la sintaxis: $ (ventana). ¿Es algo específico de jquery?
Byff

1
Byff, sí, $ (ventana) es una construcción jQuery. window.onresize es el equivalente en JavaScript sin procesar.
Andrew Hedges

Esta demostración puede ayudar a cualquiera a probar en todos los navegadores jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe el

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…
Dylan Valade

En Opera en dispositivos móviles, se activa cada vez que se muestra / oculta la barra superior (interfaz de usuario del navegador).
psur

Respuestas:


367

jQuery tiene un método incorporado para esto:

$(window).resize(function () { /* do something */ });

En aras de la capacidad de respuesta de la interfaz de usuario, puede considerar usar un setTimeout para llamar a su código solo después de una cierta cantidad de milisegundos, como se muestra en el siguiente ejemplo, inspirado en esto :

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

34
¿Por qué este evento no se activa cuando la ventana se expande a pantalla completa con el botón?
Sly

2
@Sly Para mí funciona, en Safari, Chrome y Mozilla en Mac. ¿Qué navegador usas?
Mark Vital

2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Zack Zatkin-Gold

66
Elijah, esto es JavaScript. Lo que escribió no es correcto (excepto en un caso específico cuando está construyendo con nuevo).
Yoh Suzuki

3
Vale la pena mencionar que esta función jQuery "agrega" una llamada de función a la lista actual de funciones que deberían llamarse en un cambio de tamaño de ventana. No sobrescribe los eventos existentes que están actualmente programados en un cambio de tamaño de ventana.
RTF

48
$(window).bind('resize', function () { 

    alert('resize');

});

44
Prefiero el enfoque de enlace, ya que el método resize () es en realidad un acceso directo para el enfoque de enlace completo, y a menudo encuentro que generalmente hay más de un controlador de eventos que debería aplicar a un elemento.
Mike Kormendy

@Mike: no solo eso, sino que supongo que el método de cambio de tamaño no tiene un método de "desvinculación" en caso de que desee eliminar el oyente. "Bind" es definitivamente el camino a seguir!
Shane

43

Aquí está la forma no jQuery de aprovechar el evento de cambio de tamaño:

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

Funciona en todos los navegadores modernos. Lo hace no del acelerador cualquier cosa por ti. Aquí hay un ejemplo de ello en acción.


Esta solución no estaría funcionando en IE. Versión fija con soporte de IE dom: stackoverflow.com/questions/6927637/…
Sergey

1
> No acelera nada para ti. ¿Podría por favor elaborar? ¿Qué debería / aceleraría? ¿Se relaciona con el evento que se dispara muchas veces seguidas?
josinalvo

@josinalvo generalmente cuando escuchas un evento que se dispara mucho , querrás eliminarlo (por ejemplo, lodash) para que no provoques un cuello de botella en tu programa.
Jondlm

17

Lamento traer un hilo viejo, pero si alguien no quiere usar jQuery, puede usar esto:

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

8
Solo tenga en cuenta que esto bloqueará cualquier controlador existente que pueda estar vinculado a window.onresize. Si su secuencia de comandos tiene que vivir en un ecosistema con otras secuencias de comandos, no debe suponer que su secuencia de comandos es la única que desea hacer algo al cambiar el tamaño de la ventana. Si no puede usar un marco como jQuery, al menos debería considerar tomar la ventana existente. Onresize y agregar su controlador al final, en lugar de bloquearlo por completo.
Tom Auger

2
@TomAuger "al menos deberías considerar tomar la ventana existente. Al tamaño y agregar tu controlador al final" - ¿probablemente quisiste decir lo contrario, es decir, "llamar al controlador existente al final de tu controlador"? Realmente me gustaría ver un código javascript que agregaría algo al final de la función ya existente :-)
TMS

Veo su punto, en cierto sentido: su nuevo controlador onResize necesita ajustar el onResize existente. Sin embargo, no tiene que llamar a la función que desea agregar a onResize hasta que haya llamado al controlador original de onResize. Por lo tanto, aún puede asegurarse de que su nueva función onResize se ejecute después de la función onResize original, que probablemente sea mejor que la inversa.
Tom Auger


5

Usando jQuery 1.9.1 acabo de descubrir que, aunque es técnicamente idéntico *, esto no funcionó en IE10 (sino en Firefox):

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

Si bien esto funcionó en ambos navegadores:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

Editar :)
* En realidad no es técnicamente idéntico, como se señaló y explicó en los comentarios de WraithKenny y Henry Blyth .


1
Hay dos cambios. ¿Cuál tuvo el efecto? ( .resize()A .bind('resize')? O la adición de la función anónima que estoy pensando que es el segundo.)
WraithKenny

@WraithKenny Buen punto. Es muy posible que agregar la función anónima sea lo que lo hizo funcionar. No recuerdo si lo intenté.
bassim

1
En el primer caso, el adjustSizemétodo pierde su contexto de this, mientras que la segunda llamada CmsContent.adjustSize()conserva this, es decir this === CmsContent. Si CmsContentse requiere la instancia en el adjustSizemétodo, el primer caso fallará. El segundo caso funcionará para cada tipo de llamada de función, por lo que se recomienda pasar siempre una función anónima.
Henry Blyth

1
@HenryBlyth ¡Gracias! +1
bassim

4

jQueryproporciona la $(window).resize()función por defecto:

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script> 

3

Considero que el complemento jQuery "jQuery resize event" es la mejor solución para esto, ya que se encarga de limitar el evento para que funcione igual en todos los navegadores. Es similar a la respuesta de Andrews, pero mejor ya que puede conectar el evento de cambio de tamaño a elementos / selectores específicos, así como a toda la ventana. Abre nuevas posibilidades para escribir código limpio.

El complemento está disponible aquí.

Hay problemas de rendimiento si agrega muchos oyentes, pero para la mayoría de los casos de uso es perfecto.


0

Creo que deberías agregar más control a esto:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }

0

espero que ayude en jQuery

defina una función primero, si hay una función existente salte al siguiente paso.

 function someFun() {
 //use your code
 }

uso de cambio de tamaño del navegador como estos.

 $(window).on('resize', function () {
    someFun();  //call your function.
 });

0

Además de las funciones de cambio de tamaño de ventana mencionadas, es importante comprender que los eventos de cambio de tamaño se disparan mucho si se usan sin desestimar los eventos.

Paul Irish tiene una excelente función que elimina mucho las llamadas de cambio de tamaño. Muy recomendado para usar. Funciona entre navegadores. Lo probé en IE8 el otro día y todo estuvo bien.

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Asegúrese de revisar la demostración para ver la diferencia.

Aquí está la función para completar.

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.