Comment charger des fichiers de script locaux en tant que secours dans les cas où CDN est bloqué/indisponible? [dupliquer]

Cette question a déjà une réponse ici:

J'utilise un CDN pour ce qui suit javascript:

Pour chacun, comment puis-je revenir à l'utilisation de la copie locale dans le cas où il peut être bloqué / indisponible?

131
demandé sur Gumbo 2011-03-10 12:52:02

11 réponses

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

Sur ce principe sont basées des solutions comme ça: 

<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 fenêtre.le script cdn défini par la propriété jQuery n'a pas été chargé).

Vous pouvez construire vos propres solutions en utilisant cette méthode. Par exemple, le plugin jQuery tooltip crée la fonction $.tooltip() afin que nous puissions la vérifier avec du code comme ce:

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>
217
répondu Dmitry Evseev 2013-03-18 15:11:24

Je l'aurais regardé dans 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'objet à vérifier, vérifiez la documentation sur le site

16
répondu Eivind 2011-04-02 09:32:23 
<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>

Prises de HTML5 Réutilisable.

6
répondu EMMERICH 2011-04-06 06:29:44

J'utilise http://fallback.io/

  fallback.load({
        // Include your stylesheets, this can be an array of stylesheets or a string!
        page_css: 'index.css',

        // JavaScript library. THE KEY MUST BE THE LIBARIES WINDOW VARIABLE!
        JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',

        // Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
        jQuery: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js',
            '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        ],   .......
4
répondu Maxim 2014-03-31 09:29:09

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 est simplement de vérifier si le premier plugin (JQ validate) a été chargé. en vérifiant une fonction statique validate sur jQuery.objet fn. Je ne peux pas vérifier le deuxième script de la même manière, car il n'ajoute rien n'importe où, juste en faisant appel à 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.

3
répondu wildcard 2011-03-27 21:57:36

Vous devez savoir, comment vous pouvez vous assurer qu'une lib 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>

Donc, cela essaie de charger jQuery (1.5.1) à partir du CDN google. Puisque les balises <script> bloquent le processus global de rendu et d'exécution (si elles ne sont pas explicitement dites différentes), nous pouvons vérifier juste après si l'objet jQuery est trouvé dans window. Si ce n'est pas le cas, il suffit d'écrire une autre balise <script> dans le document, en référençant une copie locale.

2
répondu jAndy 2011-03-10 09:59:13

La solution suivante passe la validation pour HTML5, XHTML 1.0 Transitional et d'autres saveurs HTML. Placez les éléments suivants après chacun de vos appels jQuery externes. Assurez-vous de remplacer jquery.min.js avec le chemin d'accès à votre copie locale du script JQuery.

<script type="application/javascript">window.jQuery || 
document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))</script>

Si vous n'utilisez pas unescape, vous aurez des erreurs lors de la validation avec http://validator.w3.org puisque " % " n'est pas autorisé dans une liste de spécifications d'attributs.

L'exemple standard HTML5 a également erreurs de validation lorsqu'il est utilisé avec HTML plus ancien:

  1. attribut requis "type" non spécifié
  2. le caractère " & " est le premier caractère d'un délimiteur mais s'est produit en tant que données

Vous serez bien avec la solution standard HTML5 si vous développez uniquement pour HTML5 et les futures saveurs HTML, mais puisque vous pouvez vous retrouver à insérer des parties de votre code dans HTML hérité, jouer en toute sécurité avec cette approche one-size-fits-all.

Vous devrez spécifier un autre fonction pour chaque script hébergé en externe. Par exemple, le plugin jQuery tooltip crée le$.fonction tooltip (), de sorte que vous pouvez le vérifier avec ce qui suit: 

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>
2
répondu Loren 2012-07-12 20:36:24

J'ai répondu à des questions similaires à jQuery ui-comment utiliser Google CDN

Vous pouvez faire l'appel en utilisant 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>

Vous pouvez également créer un lien vers d'autres thèmes de L'interface utilisateur en modifiant le nom du thème. Dans ce cas, remplacez la base de nom par un autre nom de thème /base/jquery-ui.css par un autre thème. 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />

Consultez le blog jQuery UI pour un lien de tous les liens CDN http://blog.jqueryui.com/

Si vous souhaitez revenir à votre hôte en cas D'échec de Google, vous pouvez do 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
1
répondu Hussein 2017-05-23 12:10:44 
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>   
<script type="text/javascript">
if(typeof jQval == 'undefined')
{
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.unobtrusive.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Prises à partir de cet article

0
répondu Swaff 2011-03-27 21:49:19

Mieux vaut faire tout ce chargement de script avec votre propre code Javascript.

Essayez D'abord de charger le fichier CDN en insérant un nouvel élément de SCRIPT dans le DOM. Ensuite, vérifiez qu'il a chargé en recherchant un objet qu'il définit. Si l'objet n'apparaît pas, insérez un autre élément de SCRIPT pour charger la copie locale. Probablement mieux pour nettoyer le DOM et supprimer les SCRIPTs qui n'ont pas réussi à charger aussi bien.

N'oubliez pas de tenir compte des problèmes de synchronisation, c'est-à-dire que la charge n'est pas instantanée.

0
répondu Michael Dillon 2011-04-09 20:51:26

Je ne pense pas qu'aucune des solutions pourrait être indolore si le CDN associé est vraiment filtré. (comme par exemple iptables / drop, routeurs mal configurés.) Si vous ne leur faites pas confiance, utilisez tout localement... Et vous vous épargnez quelques surprises / appels des utilisateurs sur le réseau exotique.

0
répondu Lajos Veres 2013-11-17 12:05:36