Jak mogę podłączyć zdarzenie zmiany rozmiaru okna przeglądarki?
Istnieje sposób jQuery nasłuchiwania zdarzeń zmiany rozmiaru, ale wolałbym nie włączać go do mojego projektu tylko z tego powodu.
javascript
dom-events
window-resize
Martwe konto
źródło
źródło
Odpowiedzi:
jQuery właśnie otacza standardowe
resize
zdarzenie DOM, np.jQuery może trochę popracować, aby zapewnić, że zdarzenie zmiany rozmiaru będzie uruchamiane konsekwentnie we wszystkich przeglądarkach, ale nie jestem pewien, czy którakolwiek z przeglądarek się różni, ale zachęcam do przetestowania w Firefox, Safari i IE.
źródło
window.addEventListener('resize', function(){}, true);
window.onresize = () => { /* code */ };
lub lepszy:window.addEventListener('resize', () => { /* code */ });
Po pierwsze, wiem, że
addEventListener
metoda została wspomniana w komentarzach powyżej, ale nie widziałem żadnego kodu. Ponieważ jest to preferowane podejście, oto:Oto działająca próbka .
źródło
removeEventListener
.Nigdy nie zastępuj funkcji window.onresize.
Zamiast tego utwórz funkcję, aby dodać detektor zdarzeń do obiektu lub elementu. To sprawdza i powoduje, że detektory nie działają, a następnie zastępuje funkcję obiektu w ostateczności. Jest to preferowana metoda stosowana w bibliotekach takich jak jQuery.
object
: element lub obiekt oknatype
: zmiana rozmiaru, przewijanie (typ zdarzenia)callback
: odwołanie do funkcjiZatem użycie jest takie:
lub z anonimową funkcją:
źródło
attachEvent
nie jest już obsługiwany. Preferowanym sposobem na przyszłość jestaddEventListener
.elem == undefined
. Możliwe (choć mało prawdopodobne), że „niezdefiniowany” jest lokalnie zdefiniowany jako coś innego. stackoverflow.com/questions/8175673/…Zdarzenie zmiany rozmiaru nigdy nie powinno być używane bezpośrednio, ponieważ jest uruchamiane w sposób ciągły podczas zmiany rozmiaru.
Użyj funkcji debounce, aby złagodzić nadmiar połączeń.
window.addEventListener('resize',debounce(handler, delay, immediate),false);
Oto powszechna debata unosząca się w sieci, ale szukaj bardziej zaawansowanych, jak featta w lodash.
Można to wykorzystać tak ...
Nigdy nie będzie strzelał więcej niż raz na 200 ms.
Do zmian orientacji mobilnej użyj:
Oto mała biblioteka, którą stworzyłem, aby starannie się tym zająć.
źródło
(...arguments) => {...}
(lub...args
dla mniejszego zamieszania), ponieważarguments
zmienna nie jest już dostępna.Rozwiązanie dla 2018+:
Powinieneś użyć ResizeObserver . Jest to rozwiązanie natywne dla przeglądarki, które ma znacznie lepszą wydajność niż korzystanie ze
resize
zdarzenia. Ponadto obsługuje nie tylko zdarzenie,document
ale także arbitralneelements
.Obecnie obsługują go Firefox, Chrome i Safari . W przypadku innych (i starszych) przeglądarek musisz użyć wypełnienia wypełniającego .
źródło
Uważam, że @Alex V udzielił prawidłowej odpowiedzi, ale odpowiedź wymaga pewnej modernizacji, ponieważ ma już ponad pięć lat.
Istnieją dwa główne problemy:
Nigdy nie używaj
object
jako nazwy parametru. To słowo zastrzeżone. Biorąc to pod uwagę, zapewniona funkcja @Alex V nie będzie działaćstrict mode
.addEvent
Funkcję dostarczaną przez @Alex V nie zwracająevent object
jeśliaddEventListener
stosowana jest metoda. AbyaddEvent
to umożliwić, należy dodać kolejny parametr do funkcji.UWAGA: Nowy parametr
addEvent
został opcjonalny, aby migracja do tej nowej wersji funkcji nie przerywała żadnych wcześniejszych wywołań tej funkcji. Wszystkie starsze zastosowania będą obsługiwane.Oto zaktualizowana
addEvent
funkcja z następującymi zmianami:Przykładowe wywołanie nowej
addEvent
funkcji:źródło
Dzięki za odwołanie się do mojego postu na blogu pod adresem http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .
Chociaż możesz po prostu podłączyć się do standardowego zdarzenia zmiany rozmiaru okna, przekonasz się, że w IE zdarzenie jest uruchamiane raz na każdy ruch X i raz na każdy ruch w osi Y, w wyniku czego wywoływana jest tona zdarzeń, które mogą mieć wydajność wpływ na witrynę, jeśli renderowanie jest intensywnym zadaniem.
Moja metoda polega na krótkim przekroczeniu limitu czasu, który jest anulowany przy kolejnych zdarzeniach, dzięki czemu zdarzenie nie jest propagowane do twojego kodu, dopóki użytkownik nie zmieni rozmiaru okna.
źródło
źródło
Przydatny może być następujący post na blogu: Naprawianie zdarzenia zmiany rozmiaru okna w IE
Zapewnia ten kod:
źródło
Wymienione powyżej rozwiązania będą działać, jeśli wszystko, co chcesz zrobić, to zmienić rozmiar okna i tylko okna. Jeśli jednak chcesz, aby zmiana rozmiaru była propagowana do elementów potomnych, musisz sam propagować zdarzenie. Oto przykładowy kod, aby to zrobić:
Zauważ, że element potomny może wywoływać
na obiekcie zdarzenia, który jest przekazywany jako pierwszy argument zdarzenia zmiany rozmiaru. Na przykład:
źródło
źródło
źródło