2010-10-12 5 views
3

Nous avons quelques endroits où nous incluons des blocs en ligne <script> qui exécutent le code, enveloppés par $(document).ready(). Plusieurs de ces blocs utilisent des méthodes dépendant d'autres scripts externes. Pendant l'exécution normale de la page, cette technique fonctionne correctement, mais lorsque l'utilisateur quitte la page avant d'être complètement chargé, l'événement $(document).ready() est déclenché et IE renvoie "Object does not support this property or method" erreurs à gauche et à droite..ready() déclenché après window.beforeunload

Grâce à quelques tests que j'ai découvert que l'événement window.beforeunload est déclenché avant que les événements ready, je donc aimerais pouvoir empêcher les événements ready d'être déclenché à ce moment-là. Idéalement, j'aimerais avoir une solution qui généralise afin de ne pas avoir à modifier tout le code en ligne.

Si ce n'est pas possible, suggérez-vous d'envelopper tout le code en ligne dans les blocs try-catch, en déterminant si tous les scripts externes ont été chargés avant d'exécuter le code en ligne, etc?

+0

Est-ce que vous chargez vos plugins jquery __after__jquery et __avant__ vos appels 'document.ready'? –

+0

alors vous insérez un fichier script dans le gestionnaire 'onbeforeunload'? – jAndy

+0

La mise à niveau vers jQuery 1.4.3 dans quelques jours est-elle une option? Il ajoute la possibilité de retarder les gestionnaires 'ready'. –

Répondre

1

a fini par aller avec la solution suivante:

<script type="text/javascript"> 
window.onbeforeunload = function(){ 
    $.readyList = null; 
} 
</script> 

Il est un peu hackier que je l'aurais préféré, mais il fait le travail.

+0

piratage utile. +1 pour une utilisation future;) – naugtur

1

Les scripts en ligne ne doivent pas être écrasés comme si les plugins étaient chargés après le fait.

Une meilleure façon, l'OMI, est de mettre en place vos pages comme ceci:

<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div id="content"> 
     </div> 
     <script src="jquery.js"></script> 
     <script src="jquery.customerPlugins.js"></script> 
     <script> 
      $(function(){ 
       // all inline would go here! 
      }); 
     </script> 
     <script src="main.js"></script> 
    </body> 
</html> 

Mais si ce n'est pas une option que vous pouvez (mais probablement ne devrait pas) (code non testé ci-dessous):

<html> 
    <head> 
     <title></title> 
     <script src="jquery.js"></script> 
     <script> 
      var readyQueue = []; 
     </script> 
    </head> 
    <body> 
     <script> 
      readyQueue.push(function(){ 
       $("body").append("<div />").customPlugin(); 
      }); 
     </script> 
     <div id="content"> 
      <script> 
       readyQueue.push(function(){ 
        $("#content").customPlugin(); 
       }); 
      </script> 
     </div> 
     <script src="jquery.customPlugins.js"></script> 
     <script> 
      // do something like this... 
      $(function(){ 
       var fn; 
       while(fn = readyQueue.shift()){ 
        fn(); 
       } 
       // if you want to continue to use readyQueue in code 
       // below/after this you could do something like the following: 
       readyQueue = {"push": function(fn){ 
        fn(); 
       })}; 
       // this would execute immediately: 
       readyQueue.push(function(){ 
        alert('Hello'); 
       }); 
      }); 
     </script> 
     <script src="main.js"></script> 
    </body> 
</html> 

Alors que vous y êtes, consultez html5boilerplate.com.

+0

Tout à fait d'accord qu'il serait préférable de consolider le JS en ligne. Malheureusement, c'est un projet plus important que ce que j'ai pour le moment. – nleach

+0

Essayez la deuxième option. C'est plus une preuve de concept que du code réel (ce n'est pas testé). Le truc [] .push pour pousser la fonction est très similaire aux méthodes de la plupart des scripts asynchrones (google analytics est similaire). –

Questions connexes