Comment déclencher l'événement de redimensionnement de la fenêtre en JavaScript?

J'ai enregistré un déclencheur lors du redimensionnement de la fenêtre. Je veux savoir comment déclencher l'événement à appeler. Par exemple, lorsque je masque un div, je veux que ma fonction de déclenchement soit appelée.

J'ai trouvé window.resizeTo()peut déclencher la fonction, mais existe-t-il une autre solution?

Dans la mesure du possible, je préfère appeler la fonction plutôt que d'envoyer un événement. Cela fonctionne bien si vous avez le contrôle sur le code que vous souhaitez exécuter, mais voyez ci-dessous les cas où vous ne possédez pas le code.

window.onresize = doALoadOfStuff;

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

Dans cet exemple, vous pouvez appeler la doALoadOfStufffonction sans envoyer d'événement.

Dans vos navigateurs modernes, vous pouvez déclencher l'événement en utilisant:

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

Cela ne fonctionne pas dans Internet Explorer, où vous devrez faire le long terme:

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

jQuery a la triggerméthode , qui fonctionne comme ceci:

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

Et a la mise en garde:

Bien que .trigger () simule une activation d'événement, avec un objet d'événement synthétisé, il ne reproduit pas parfaitement un événement naturel.

Vous pouvez également simuler des événements sur un élément spécifique ...

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

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}

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

Avec jQuery, vous pouvez essayer d'appeler trigger :

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

Un JS pur qui fonctionne également sur IE (d' après le commentaire @Manfred )

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

Ou pour angulaire:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});

Combiner les réponses de pomber et d'avetisk pour couvrir tous les navigateurs et ne pas provoquer d'avertissements:

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

Je n'ai pas réussi à faire fonctionner cela avec l'une des solutions ci-dessus. Une fois que j'ai lié l'événement avec jQuery, cela a bien fonctionné comme ci-dessous:

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');

juste

$(window).resize();

est ce que j'utilise ... à moins que je ne comprenne mal ce que vous demandez.

Réponse avec RxJS

Dites comme quelque chose en angulaire

size$: Observable<number> = fromEvent(window, 'resize').pipe(
            debounceTime(250),
            throttleTime(300),
            mergeMap(() => of(document.body.clientHeight)),
            distinctUntilChanged(),
            startWith(document.body.clientHeight),
          );

Si vous souhaitez un abonnement manuel (ou pas angulaire)

this.size$.subscribe((g) => {
      console.log('clientHeight', g);
    })

Puisque mon début initial avec une valeur peut être incorrecte (envoi pour correction)

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

Dire angulaire (je pourrais ..)

<div class="iframe-container"  [style.height.px]="size$ | async" >..

Je pense que cela devrait fonctionner pour tous les navigateurs:

var event;
if (typeof (Event) === 'function') {
    event = new Event('resize');
} else { /*IE*/
    event = document.createEvent('Event');
    event.initEvent('resize', true, true);
}
window.dispatchEvent(event);

Vous pouvez le faire avec cette bibliothèque. https://github.com/itmor/events-js

const events = new Events();

events.add({  
  blockIsHidden: () =>  {
    if ($('div').css('display') === 'none') return true;
  }
});

function printText () {
  console.log('The block has become hidden!');
}

events.on('blockIsHidden', printText);

window.resizeBy()déclenchera l'événement onresize de la fenêtre. Cela fonctionne à la fois en Javascript ou en VBScript .

window.resizeBy(xDelta, yDelta)appelé comme window.resizeBy(-200, -200)pour réduire la page 200px par 200px.