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

327

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?

zhongshu
la source

Réponses:

382

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);
}
Fenton
la source
6
Votre fonction anonyme n'est pas nécessaire. window.onresize = doALoadOfStuff; De plus, cela ne répond pas à la question, la réponse de pinouchon ci-dessous est la bonne réponse.
Dennis Plucinik
42
À Google r: Jetez un œil à la réponse de @ avetisk.
Fabian Lauer
1
C'est une bonne idée de découpler, mais dans mon / ce cas, cela ne fonctionne pas. L'appel de la méthode resize ne fonctionne pas car si le redimensionnement de la fenêtre n'est pas déclenché, d'autres div / conteneurs n'auront pas la bonne hauteur définie.
PandaWood
@PandaWood - alors mon dernier exemple est meilleur dans votre cas.
Fenton
Merci @ user75525
Bondsmith
676
window.dispatchEvent(new Event('resize'));
avetisk
la source
11
semble fonctionner avec Chrome, FF, Safari, mais pas: IE!
Davem M
14
jQuery triggerne déclenche pas réellement l'événement natif de «redimensionnement». Il déclenche uniquement les écouteurs d'événements qui ont été ajoutés à l'aide de jQuery. Dans mon cas, une bibliothèque tierce écoutait directement l'événement natif "resize" et c'est la solution qui a fonctionné pour moi.
chowey
2
Grande et simple solution. Bien que, je pense que vous devriez ajouter du code pour la compatibilité IE (pour autant que je vois, pour IE, nous devons utiliser window.fireEvent)
Victor
35
cela n'a pas fonctionné sur tous les appareils pour moi. j'ai dû déclencher l'événement comme ceci: var evt = document.createEvent ('UIEvents'); evt.initUIEvent ('resize', true, false, window, 0); window.dispatchEvent (evt);
Manfred
19
Il échoue avec "L'objet ne prend pas en charge cette action" dans mon IE11
pomber
156

Avec jQuery, vous pouvez essayer d'appeler trigger :

$(window).trigger('resize');
Benjamin Crouzier
la source
3
Un cas d'utilisation pour cela est lorsqu'un plugin jQuery utilise des événements de redimensionnement de fenêtre pour être réactif, mais que vous avez une barre latérale réductrice. Le conteneur du plugin est redimensionné, mais pas la fenêtre.
isherwood
4
Pas besoin de JQuery en effet mais je préfère la solution JQuery car mon produit utilise JQuery largement.
Sri
Où cela serait-il ajouté pour redimensionner une page wordpress après son chargement?
SAHM
Cela ne fonctionne pas pour moi dans le dernier Chrome, cette réponse fonctionne: stackoverflow.com/a/22638332/1296209
webaholik
1
c'est ce que j'ai essayé au départ - cela n'a pas fonctionné, mais l'a window.dispatchEvent(new Event('resize'));fait
user2682863
54

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);
});
bombardier
la source
4
Malheureusement , la documentation UIEvent.initUIEvent () dit Do not use this method anymore as it is deprecated.Les createEvent docs disent « De nombreuses méthodes utilisées avec createEvent, comme initCustomEvent, sont dépréciées. Utilisez les constructeurs d'événements à la place. » Cette page semble prometteuse pour les événements de l'interface utilisateur.
Racing Tadpole
9
Vrai, mais IE11 ne prend pas en charge la new Event()méthode. Je pense qu'en tant que hack contre les navigateurs plus anciens, vous pourriez faire quelque chose comme if (Event.prototype.initEvent) { /* deprecated method */ } else { /* current method */ }. Où la méthode actuelle est la réponse de l' avetisk .
BrianS
@pomber Merci pour la solution, En fait, j'essayais de déclencher un événement personnalisé pour le redimensionnement de la fenêtre pour redimensionner mon graphique ... votre solution m'a sauvé la journée
Dinesh Gopal Chand
49

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);
}
pfirpfel
la source
1
C'est un bon moyen de le faire sur tous les navigateurs sans utiliser jQuery.
kgx
aucune idée pourquoi ce n'est pas la meilleure réponse ... c'est mieux que les réponses "soit ou" qui sont acceptées ....
SPillai
14

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');
BBQ Singular
la source
Fonctionne dans Chrome aujourd'hui.
webaholik
9

juste

$(window).resize();

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

Matt Sich
la source
3
Et même si vous avez jQuery, il ne déclenche que les événements liés à jQuery.
adamdport
0

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" >..
Sergio Wilson
la source
0

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);
webaholik
la source
Fonctionne très bien dans Chrome et FF, mais n'a pas fonctionné dans IE11
Collins
@Collins - merci pour la mise à jour, je pensais l'avoir vérifié sur IE11 ... J'essaierai de prendre un peu de temps plus tard pour le mettre à jour, merci pour les commentaires.
webaholik
0

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);
It Mor
la source
-3

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.

À
la source
2
Pourquoi est-ce marqué? Est-ce incorrect? Est-ce que cela dépend du navigateur?
Peter Wone
2
Cela ne fonctionne dans aucun navigateur: Chrome, Firefox, IE, Firefox testé.
fregante
1
Firefox 7+, et probablement d'autres navigateurs modernes, ne permettent plus d'appeler cette méthode dans la plupart des cas. De plus, il n'est pas souhaitable d'avoir réellement redimensionné la fenêtre pour déclencher l'événement.
user247702
ResizeBy () et resizeTo () fonctionnent bien dans la dernière version stable de Chrome ver. 76,0
VANAGAS