Zdarzenie zmiany rozmiaru okna przeglądarki - JavaScript / jQuery

240

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?

BuddyJoe
źródło
Też się nad tym zastanawiam. Chciałbym spróbować zastosować oferowane tutaj rozwiązania, ale obawiam się, że nie rozumiem składni: $ (okno). Czy to coś specyficznego dla jquery?
Byff
1
Byff, tak, $ (okno) jest konstrukcją jQuery. window.onresize jest odpowiednikiem surowego JavaScript.
Andrew Hedges
To demo może pomóc każdemu przetestować na wszystkich przeglądarkach jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe
window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…
Dylan Valade
W Operze na urządzenia mobilne jest on uruchamiany za każdym razem, gdy górny pasek (interfejs przeglądarki) wyświetla się / ukrywa.
psur

Odpowiedzi:

367

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);
});
Andrew Hedges
źródło
34
Dlaczego to zdarzenie nie jest uruchamiane, gdy okno zostanie rozwinięte do pełnego ekranu za pomocą przycisku?
Sly
2
@Sly Dla mnie to działa, w Safari, Chrome i Mozilla na Macu. Z jakiej przeglądarki korzystasz?
Mark Vital
2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Zack Zatkin-Gold
6
Elijah, to jest JavaScript. To, co napisałeś, jest niepoprawne (z wyjątkiem jednego konkretnego przypadku, gdy tworzysz z nowym).
Yoh Suzuki
3
Warto wspomnieć, że ta funkcja jQuery „dodaje” wywołanie funkcji do bieżącej listy funkcji, które należy wywołać przy zmianie rozmiaru okna. Nie zastępuje istniejących zdarzeń, które są obecnie planowane przy zmianie rozmiaru okna.
RTF
48
$(window).bind('resize', function () { 

    alert('resize');

});
fts
źródło
4
Wolę podejście wiążące, ponieważ metoda resize () jest tak naprawdę skrótem do pełnego podejścia wiążącego, i często stwierdzam, że zwykle istnieje więcej niż jedna procedura obsługi zdarzeń, którą powinienem zastosować do elementu.
Mike Kormendy,
@ Mike - Nie tylko to, ale zgaduję, że metoda zmiany rozmiaru nie ma metody „unbind” w przypadku, gdy chcesz usunąć detektor. „bind” to zdecydowanie najlepsza droga!
Shane
43

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.

Jondlm
źródło
to rozwiązanie nie działałoby w IE. Naprawiona wersja z obsługą IE dom: stackoverflow.com/questions/6927637/…
Sergey
1
> Nic dla ciebie nie dławi. Czy możesz prosić o opracowanie? Co powinno / powinno dusić? Czy odnosi się to do zdarzenia strzelającego wiele razy z rzędu?
josinalvo,
@josinalvo na ogół, kiedy słuchasz wydarzenia, które dużo odpala , będziesz chciał je ogłosić (np. lodash) , abyś nie spowodował wąskiego gardła w swoim programie.
Jondlm,
17

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;
javascript jest przyszłością
źródło
8
Pamiętaj tylko, że spowoduje to zablokowanie wszystkich istniejących programów obsługi, które mogą być powiązane z Window.onresize. Jeśli skrypt musi żyć ekosystemem z innymi skryptami, nie należy zakładać, że skrypt jest jedynym, który chce coś zrobić przy zmianie rozmiaru okna. Jeśli nie możesz użyć frameworka, takiego jak jQuery, powinieneś przynajmniej rozważyć pobranie istniejącego window.onresize i dodanie swojego programu obsługi na jego końcu, a nie całkowite zablokowanie go.
Tom Auger,
2
@TomAuger „powinieneś przynajmniej rozważyć pobranie istniejącego window.onresize i dodanie swojego modułu obsługi na jego końcu” - prawdopodobnie miałeś na myśli coś przeciwnego, tj. „ Wywołać istniejący moduł obsługi na końcu modułu obsługi”? Naprawdę chciałbym zobaczyć kod javascript, który dodałby coś na końcu już istniejącej funkcji :-)
TMS
W pewnym sensie rozumiem twój punkt widzenia - nowy moduł obsługi onResize musi owinąć istniejący element onResize. Jednak nie musi wywoływać funkcji, którą chcesz dodać do onResize, dopóki nie wywoła oryginalnej procedury obsługi onResize. Możesz więc nadal upewnić się, że nowa funkcja onResize działa po oryginalnej funkcji onResize, co jest prawdopodobnie lepsze niż odwrotna.
Tom Auger,
8

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

Paolo Bergantino
źródło
5

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 .

bassim
źródło
1
Są dwie zmiany. Który miał wpływ? ( .resize()do .bind('resize')lub dodając anonimową funkcję? Myślę, że to druga.)
WraithKenny
@WraithKenny Dobry punkt. Bardzo możliwe, że dodanie anonimowej funkcji sprawiło, że działała. Nie pamiętam, gdybym spróbował.
bassim
1
W pierwszym przypadku adjustSizemetoda traci kontekst this, podczas gdy drugie wywołanie CmsContent.adjustSize()zachowuje this, tj this === CmsContent. Jeśli CmsContentinstancja jest wymagana w adjustSizemetodzie, pierwszy przypadek zakończy się niepowodzeniem. Drugi przypadek będzie działał dla każdego rodzaju wywołania funkcji, dlatego zaleca się zawsze przekazywać anonimowe funkcje.
Henry Blyth,
1
@HenryBlyth Dziękujemy! +1
bassim
4

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> 
Aditya P Bhatt
źródło
3

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.

oldwizard
źródło
0

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);
        });
    }
Francesco Frapporti
źródło
0

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.
 });
Venu immadi
źródło
0

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...
});
lowtechsun
źródło