Evento di ridimensionamento della finestra tra browser - JavaScript / jQuery

Qual è il metodo (moderno) corretto per toccare l'evento di ridimensionamento della finestra che funziona in Firefox, WebKit e Internet Explorer?

E puoi attivare / disattivare entrambe le barre di scorrimento?

jQuery ha un metodo integrato per questo:

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

Per motivi di reattività dell'interfaccia utente, potresti prendere in considerazione l'utilizzo di setTimeout per chiamare il codice solo dopo un certo numero di millisecondi, come mostrato nell'esempio seguente, ispirato da questo :

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

});

Ecco il modo non jQuery di toccare l'evento di ridimensionamento:

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

Funziona su tutti i browser moderni. Lo fa Non acceleratore nulla per te. Ecco un esempio in azione.

Mi dispiace per far apparire un vecchio thread, ma se qualcuno non vuole usare jQuery puoi usare questo:

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

Dato che sei aperto a jQuery, questo plugin sembra fare il trucco.

Utilizzando jQuery 1.9.1 ho appena scoperto che, sebbene tecnicamente identico) *, questo non ha funzionato in IE10 (ma in Firefox):

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

mentre questo ha funzionato in entrambi i browser:

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

Modifica :)
* In realtà non tecnicamente identico, come notato e spiegato nei commenti di WraithKenny e Henry Blyth .

jQueryfornisce la $(window).resize()funzione di default:

<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 il plug-in jQuery "jQuery resize event" come la migliore soluzione per questo in quanto si occupa di limitare l'evento in modo che funzioni allo stesso modo su tutti i browser. È simile alla risposta di Andrews, ma è meglio poiché puoi agganciare l'evento di ridimensionamento a elementi / selettori specifici e all'intera finestra. Apre nuove possibilità per scrivere codice pulito.

Il plugin è disponibile qui

Ci sono problemi di prestazioni se aggiungi molti ascoltatori, ma per la maggior parte dei casi di utilizzo è perfetto.

Penso che dovresti aggiungere ulteriore controllo a questo:

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

spero che possa essere d'aiuto in jQuery

definire prima una funzione, se esiste una funzione esistente saltare al passaggio successivo.

 function someFun() {
 //use your code
 }

il ridimensionamento del browser è simile a questi.

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

Oltre alle funzioni di ridimensionamento della finestra menzionate, è importante capire che gli eventi di ridimensionamento si attivano molto se usati senza deboucing degli eventi.

Paul Irish ha una funzione eccellente che rimanda molto le chiamate di ridimensionamento. Molto raccomandato da usare. Funziona su più browser. L'ho provato in IE8 l'altro giorno e tutto è andato bene.

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

Assicurati di dare un'occhiata alla demo per vedere la differenza.

Ecco la funzione per completezza.

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