Evento de redimensionamento da janela entre navegadores - JavaScript / jQuery

Qual é o método (moderno) correto para tocar no evento de redimensionamento de janela que funciona no Firefox, WebKit e Internet Explorer?

E você pode ativar / desativar as duas barras de rolagem?

O jQuery possui um método interno para isso:

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

Por uma questão de responsividade da interface do usuário, considere usar um setTimeout para chamar seu código somente após um número de milissegundos, conforme mostrado no exemplo a seguir, inspirado por isso :

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

});

Aqui está a maneira não-jQuery de acessar o evento de redimensionamento:

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

Funciona em todos os navegadores modernos. Ele faz não acelerador qualquer coisa para você. Aqui está um exemplo disso em ação.

Desculpe abrir um tópico antigo, mas se alguém não quiser usar o jQuery, você pode usar o seguinte:

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

Como você está aberto ao jQuery, este plugin parece funcionar.

Usando o jQuery 1.9.1, descobri que, embora tecnicamente idêntico) *, isso não funcionava no IE10 (mas no Firefox):

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

enquanto isso funcionava nos dois navegadores:

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

Edit :)
* Na verdade, não é tecnicamente idêntico, conforme observado e explicado nos comentários de WraithKenny e Henry Blyth .

jQueryfornece $(window).resize()função por padrão:

<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 o plugin jQuery "evento de redimensionamento jQuery" é a melhor solução para isso, pois ele cuida da limitação do evento para que ele funcione da mesma forma em todos os navegadores. É semelhante à resposta de Andrews, mas é melhor, pois você pode conectar o evento de redimensionamento a elementos / seletores específicos, bem como a janela inteira. Abre novas possibilidades para escrever código limpo.

O plugin está disponível aqui

Existem problemas de desempenho se você adicionar muitos ouvintes, mas para a maioria dos casos de uso é perfeito.

Eu acho que você deve adicionar mais controle a isso:

    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 ajude no jQuery

defina uma função primeiro, se houver uma função existente, pule para a próxima etapa.

 function someFun() {
 //use your code
 }

redimensionar o navegador use como estes.

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

Além das funções de redimensionamento da janela mencionadas, é importante entender que os eventos de redimensionamento são acionados muito se usados ​​sem que os eventos sejam reduzidos.

Paul Irish tem uma excelente função que rebaixa o redimensionamento de chamadas. Muito recomendado para usar. Funciona em vários navegadores. Testei no IE8 outro dia e estava tudo bem.

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

Verifique a demonstração para ver a diferença.

Aqui está a função de completude.

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