Evento de redimensionamento de janela entre navegadores – JavaScript / jQuery

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

E você pode ligar / desligar as duas barras de rolagem?

jQuery tem um método embutido para isso:

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

Por uma questão de capacidade de resposta da IU, você pode considerar o uso de um setTimeout para chamar seu código somente após alguns milissegundos, conforme mostrado no exemplo a seguir, inspirado por:

 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. Não estrangula nada para você. Aqui está um exemplo disso em ação.

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

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

Desde que você está aberto para jQuery, este plugin parece fazer o truque.

Usando jQuery 1.9.1 Acabei de descobrir que, embora tecnicamente idêntico) *, isso não funcionou no IE10 (mas no Firefox):

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

enquanto isso funcionou em ambos os navegadores:

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

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

jQuery fornece a function $(window).resize() por padrão:

  

Eu considero o plugin do jQuery “jQuery resize event” como a melhor solução para isso, já que ele cuida de limitar o evento para que ele funcione da mesma forma em todos os navegadores. É semelhante à resposta de Andrews, mas é melhor, já que você pode ligar o evento de redimensionamento a elementos / seletores específicos, bem como à janela inteira. Ele 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 em jQuery

defina uma function primeiro, se houver uma function existente, pule para a próxima etapa.

  function someFun() { //use your code } 

resize navegador usar como estes.

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

Além das funções de redimensionamento da janela mencionadas, é importante entender que os events de redimensionamento triggersm muito se usados ​​sem debugar os events.

Paul Irish tem uma excelente function que elimina muito as chamadas de redimensionamento. Muito recomendado para usar. Trabalha cross-browser. Testado no IE8 no outro dia e tudo estava bem.

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

Certifique-se de verificar a demonstração para ver a diferença.

Aqui está a function 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... });