Jak uruchomić zdarzenie zmiany rozmiaru okna w JavaScript?

Zarejestrowałem WYZWALACZ przy zmianie rozmiaru okna. Chcę wiedzieć, jak Mogę wywołać to wydarzenie. Na przykład, gdy Ukryj div, chcę, aby moja funkcja wyzwalania została wywołana.

Znalazłem window.resizeTo() może wywołać funkcję, ale czy jest jakieś inne rozwiązanie?

Author: Costique, 2009-11-30
Source

8 answers

Tam, gdzie to możliwe, wolę wywoływać funkcję, niż wysyłać Zdarzenie. Działa to dobrze, jeśli masz kontrolę nad kodem, który chcesz uruchomić, ale zobacz poniżej przypadki, w których kod nie jest Twoim właścicielem.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

W tym przykładzie można wywołać funkcję doALoadOfStuff bez wysyłania zdarzenia.

W nowoczesnych przeglądarkach możesz wywołać zdarzenie używając: 

window.dispatchEvent(new Event('resize'));

To nie działa w Internet Explorerze, gdzie musisz zrobić "longhand": {]} 

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent .initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

JQuery posiada metodę trigger , która działa tak: 

$(window).trigger('resize');

I ma zastrzeżenie:

Chociaż .trigger () symuluje aktywację zdarzenia, wraz z zsyntetyzowanym obiektem zdarzenia, nie odwzorowuje idealnie naturalnie występującego zdarzenia.

Można również symulować zdarzenia na określonym elemencie...

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}
 268
Author: user75525,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-22 08:40:45 
window.dispatchEvent(new Event('resize'));
 591
Author: avetisk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-20 15:45:44

W jQuery możesz spróbować wywołać trigger: 

$(window).trigger('resize');
 141
Author: Benjamin Crouzier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-12 12:54:13

Czysty JS, który działa również na IE (z @ Manfred comment )

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

Lub dla kątowego: 

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});
 45
Author: pomber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:57

Łączenie odpowiedzi pombera i avetiska tak, aby pokrywały wszystkie przeglądarki i nie powodowały ostrzeżeń: 

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents'); 
  evt.initUIEvent('resize', true, false, window, 0); 
  window.dispatchEvent(evt);
}
 18
Author: pfirpfel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-12 14:37:52

Nie byłem w stanie uruchomić tego z żadnym z powyższych rozwiązań. Po związaniu zdarzenia z jQuery działało dobrze jak poniżej: 

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');
 12
Author: BBQ Singular,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-25 14:59:12

Just 

$(window).resize();

To jest to, czego używam... chyba, że źle zrozumiałem, o co prosisz.

 6
Author: Matt Sich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-18 01:19:05

window.resizeBy() wywoła zdarzenie onresize okna. Działa to zarówno w Javascript lub VBScript .

window.resizeBy(xDelta, yDelta) wywołane jak window.resizeBy(-200, -200), aby zmniejszyć stronę 200px o 200px.

 -3
Author: T.O.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-08 15:22:06