web-dev-qa-db-fra.com

Appeler une fonction lorsque la fenêtre est redimensionnée

Comment puis-je appeler pour que cette (ou n'importe quelle) fonction JS soit à nouveau exécutée chaque fois que la fenêtre du navigateur est redimensionnée?

<script type="text/javascript">
 function setEqualHeight(e) {
     var t = 0;
     e.each(function () {
         currentHeight = $(this).height();
         if (currentHeight > t) {
             t = currentHeight
         }
     });
     e.height(t)
 }
 $(document).ready(function () {
     setEqualHeight($(".border"))
 })
</script>
22
Rich

Vous pouvez utiliser l'événement window onresize:

window.onresize = setEqualHeight;
27
udidu

Vous pouvez vous abonner au window.onresize événement ( voir ici )

window.onresize = setEqualHeight;

ou

window.addEventListener('resize', setEqualHeight);
17
dougajmcdonald

Vous utilisez jquery, alors liez-le en utilisant la méthode .resize() .

$(window).resize(function () {
    setEqualHeight( $('#border') );
});
12

Ce morceau de code ajoutera une minuterie qui appelle la fonction de redimensionnement après 200 millisecondes après le redimensionnement de la fenêtre. Cela réduira les appels de la méthode.

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        setEqualHeight();
    }, 200);
});
11
Merec