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

¿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?

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

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

    alert('resize');

});

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.

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

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

Como está abierto a jQuery, este complemento parece ser el truco.

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 .

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> 

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.

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

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

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