Zdarzenie zmiany rozmiaru okna przeglądarki - JavaScript / jQuery

Jaka jest poprawna (nowoczesna) metoda podsłuchiwania zdarzenia zmiany rozmiaru okna, które działa w Firefox, WebKit i Internet Explorer?

Czy możesz włączyć / wyłączyć oba paski przewijania?

jQuery ma wbudowaną metodę :

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

Ze względu na responsywność interfejsu użytkownika możesz rozważyć użycie setTimeout do wywołania kodu dopiero po pewnej liczbie milisekund, jak pokazano w poniższym przykładzie, zainspirowanym tym :

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

});

Oto sposób podsłuchiwania zdarzenia zmiany rozmiaru przez użytkownika innego niż jQuery:

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

Działa na wszystkich nowoczesnych przeglądarkach. Czyni nie przepustnica coś dla ciebie. Oto przykład tego w akcji.

Przepraszam, że przywołałem stary wątek, ale jeśli ktoś nie chce używać jQuery, możesz użyć tego:

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

Ponieważ jesteś otwarty na jQuery, ta wtyczka wydaje się załatwić sprawę.

Za pomocą jQuery 1.9.1 właśnie się dowiedziałem, że chociaż technicznie identyczne) *, to nie działało w IE10 (ale w Firefox):

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

podczas gdy działało to w obu przeglądarkach:

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

Edycja :)
* W rzeczywistości nie jest technicznie identyczny, jak zauważono i wyjaśniono w komentarzach WraithKenny i Henry Blyth .

jQuery$(window).resize()domyślnie zapewnia funkcję:

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

Uważam, że wtyczka jQuery „zdarzenie zmiany rozmiaru jQuery” jest najlepszym rozwiązaniem, ponieważ dba o to, aby zdarzenie działało tak samo we wszystkich przeglądarkach. Jest podobny do odpowiedzi Andrewsa, ale lepszy, ponieważ można podłączyć zdarzenie zmiany rozmiaru do określonych elementów / selektorów, a także do całego okna. Otwiera nowe możliwości pisania czystego kodu.

Wtyczka jest dostępna tutaj

Jeśli dodasz dużo słuchaczy, występują problemy z wydajnością, ale w większości przypadków jest to idealne rozwiązanie.

Myślę, że powinieneś dodać do tego dodatkową kontrolę:

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

mam nadzieję, że pomoże to w jQuery

najpierw zdefiniuj funkcję, jeśli istnieje, przejdź do następnego kroku.

 function someFun() {
 //use your code
 }

zmiana rozmiaru przeglądarki, takie jak te.

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

Poza wymienionymi funkcjami zmiany rozmiaru okna ważne jest, aby zrozumieć, że zdarzenia zmiany rozmiaru są uruchamiane bardzo często, jeśli są używane bez usuwania zdarzeń z zdarzeń.

Paul Irish ma doskonałą funkcję, która bardzo dobrze ogłasza wywołania zmiany rozmiaru. Bardzo polecany do użycia. Działa w różnych przeglądarkach. Przetestowałem to w IE8 innego dnia i wszystko było w porządku.

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

Koniecznie sprawdź wersję demo aby zobaczyć różnicę.

Oto funkcja kompletności.

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