web-dev-qa-db-fra.com

événement de redimensionnement jQuery ne se déclenche pas

Pour quelque raison que ce soit:

$(function() {
  $(window).resize(function() {
    alert("resized!");
  });
});

déclenche uniquement un événement lorsque la page est chargée. Redimensionner la fenêtre du navigateur ne fait rien dans Safari et Firefox. Je ne l'ai pas essayé sur d'autres navigateurs.

Des idées ou une solution de contournement?

javascriptjquerywindow-resize
13
brettish

Je pense que votre alerte pose un problème essayez plutôt ceci

 $(window).resize(function() {
   $('body').prepend('<div>' + $(window).width() + '</div>');
 });

jsfiddle

9
mcgrailm

il est préférable d'éviter de s'attacher à des événements susceptibles de générer de nombreux déclenchements, tels que le redimensionnement de la fenêtre et le défilement du corps; une meilleure approche pour éviter ces événements consiste à utiliser un minuteur et à vérifier si le même événement s'est produit, puis à exécuter l'action appropriée , quelque chose comme ça:

$(function() {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

    setInterval(function () {
        if ((width != $window.width()) || (height != $window.height())) {
            width = $window.width();
            height = $window.height();

            alert("resized!");
        }
    }, 300);
});

un autre avantage de l’utilisation de la minuterie est que vous avez le contrôle total de la fréquence de vérification, ce qui vous permet une grande flexibilité si vous devez envisager des fonctionnalités supplémentaires dans la page.

11
Kris Ivanov

fonctionne dans n'importe quel navigateur:

http://jsbin.com/uyovu3/edit#preview

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});
3
balexandre

5 ans plus tard ...

Le seul navigateur avec lequel je rencontre ce problème est Chrome; Je n'ai pas Safari.

Le modèle que j'ai remarqué est que cela fonctionne quand je inline le code:

<script type="text/javascript">
    $(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>

mais not quand je le mets dans un fichier Javascript séparé que je charge avec:

<script type="text/javascript" src="/js/resized.js"></script>

où le script contient

console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });

Je ne peux que deviner qu’il s’agit d’une sorte de "protection" intégrée par l’équipe de développement de Chrome, mais c’est ridicule et agaçant. Au moins, ils auraient pu me laisser contourner cela en utilisant une "même politique de domaine".

Mise à jour pendant un moment, je pensais utiliser $(document).ready(), mais apparemment je me trompais.

1
bart

J'avais le même problème, je voyais toutes sortes de solutions et je ne travaillais pas.

En faisant des tests, j'ai remarqué que le $ (window) .resize, du moins dans mon cas, ne déclencherait qu'avec $ (document) .ready () avant. Non $ (fonction ()); ni $ (fenêtre) .ready ();

Donc, mon code est maintenant:

$(document).ready(function(){
  $(window).resize(function(){
      // refresh variables
      // Apply variables again
  });
});

... et même un travail d'alerte!

0
Reitz

essayer 

$(document).resize(function(){ ... };);

Je pense que c'est le document qui déclenche le redimensionnement de manière cohérente sur tous les navigateurs. Mais je ne suis pas au travail maintenant pour vérifier ce que je fais habituellement.

0
James Khoury