Comment charger les fichiers script locaux comme solution de repli dans les cas où les CDN sont bloqués/disponibles ?

Question

J'utilise un CDN pour le javascript suivant :

• https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
• https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js

Pour chacun d'entre eux, comment puis-je revenir à l'utilisation de la copie locale dans le cas où elle serait bloquée/disponible ?

Answer 1

Pour confirmer que le cdn script a été chargé, vous pouvez vérifier l'existence de toute variable/fonction que ce script définit, si elle est indéfinie - alors le cdn a échoué et vous devez charger la copie locale du script.

C'est sur ce principe que reposent les solutions de ce type :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

(s'il n'y a pas de propriété window.jQuery définie cdn script n'a pas été chargé).

Vous pouvez construire vos propres solutions en utilisant cette méthode. Par exemple, le plugin jquery tooltip crée $.tooltip() afin que nous puissions le vérifier avec un code comme celui-ci :

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>

Answer 2

Je me serais renseigné sur un plugin comme yepnopejs

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

Prend un tableau d'objets à vérifier, vérifiez la documentation à l'adresse suivante site

Answer 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

Tiré de HTML5 Boilerplate .

Answer 4

Première chose - ne devriez-vous pas les inclure dans un ordre différent ?

quelque chose comme ça devrait fonctionner :

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>jQuery.fn.validate || document.write('<script src="js/jquery.validate.min.js">\x3C/script><script src="js/jquery.validate.unobtrusive.min.js">\x3C/script>'</script>

ce que je fais ici, c'est simplement vérifier si le premier plugin (jQ validate) a été chargé. en vérifiant la présence d'un fichier statique validate sur l'objet jQuery.fn. Je ne peux pas vérifier le second script de la même manière, parce qu'il n'ajoute rien nulle part, se contentant de représenter des méthodes existantes, il est donc plus facile de supposer que si le premier fonctionne, le second fonctionnera aussi - après tout, ils sont fournis par le même CDN.

Answer 5

Vous devez savoir comment vous pouvez vous assurer qu'une librairie a été chargée avec succès. Par exemple :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js">\x3C/script>'</script>

Cette application essaie de charger jQuery (1.5.1) depuis le CDN de Google. Depuis <script> bloquent le processus global de rendu et d'exécution (s'il n'y a pas d'indication contraire explicite), nous pouvons vérifier juste après si la balise jQuery se trouve dans window . Si ce n'est pas le cas, il suffit de se replier en écrivant un autre <script> dans le document, en faisant référence à une copie locale.