web-dev-qa-db-fra.com

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

J'utilise un CDN pour le javascript suivant:

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

javascriptcdnfallback
136
raklos

Pour confirmer que le script cdn est chargé, vous pouvez vérifier l'existence des variables/fonctions définies par ce script, si elles ne sont pas définies - cdn échouera et vous devrez charger une copie de script locale.

Sur ce principe reposent des solutions comme celle-ci:

<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, le script cdn n'a pas été chargé).

Vous pouvez créer vos propres solutions en utilisant cette méthode. Par exemple, le plug-in d'aide-mémoire jQuery crée la fonction $.tooltip() afin que nous puissions la vérifier avec le code suivant:

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

J'aurais examiné 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, consultez la documentation sur le site

16
Eivind
<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 .

6
EMMERICH

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
Maxim

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

quelque chose comme ça devrait marcher:

<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 recherchant une fonction statique validate sur un objet jQuery.fn. Je ne peux pas vérifier le second script de la même manière, car il n’ajoute rien, il se contente de remplacer les méthodes existantes par un proxy. Il est donc plus facile de supposer que si le premier fonctionne, le second fonctionne également - après tout, elles sont fournies par le même CDN.

3
wildcard

Vous devez savoir comment vous pouvez vous assurer qu'une bibliothèque 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 essaye de charger jQuery (1.5.1) à partir du CDN de Google. Etant donné que les balises <script> Bloquent le processus de rendu et d’exécution dans son ensemble (sauf indication explicite différente), nous pouvons vérifier immédiatement si l’objet jQuery est trouvé dans window. Si ce n'est pas le cas, écrivez simplement une autre balise <script> Dans le document en faisant référence à une copie locale.

2
jAndy

La solution suivante passe avec succès la validation de HTML5, de XHTML 1.0 Transitional et d’autres variantes HTML. Placez ce qui suit après chacun de vos appels JQuery externes. Assurez-vous de remplacer jquery.min.js par le chemin de 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 car "%" n'est pas autorisé dans une liste de spécification d'attribut.

L'exemple de Boilerplate HTML5 contient également des erreurs de validation lorsqu'il est utilisé avec un code HTML plus ancien:

  1. attribut requis "type" non spécifié
  2. le caractère "&" est le premier caractère d'un délimiteur mais est apparu sous forme de données

La solution Boilerplate HTML5 vous conviendra si vous ne développez que pour HTML5 et les versions HTML à venir, mais puisque vous risquez de vous retrouver en train d'insérer des parties de votre code dans du code HTML hérité, jouez en toute sécurité avec cette approche unique. .

Vous devrez spécifier une fonction différente pour chaque script hébergé en externe. Par exemple, le plug-in JQuery Tooltip crée la fonction $ .tooltip () afin que vous puissiez le vérifier avec les éléments suivants:

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>
2
Loren

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 noms par n’importe quel autre nom de thème /base/jquery-ui.css à tout 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 de 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 le faire.

<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
Hussein

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

1
Lajos Veres
<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>

Tiré de cet article

0
Swaff

Il est préférable de charger tout ce script avec votre propre code Javascript.

Essayez d’abord de charger le fichier CDN en insérant un nouvel élément SCRIPT dans le DOM. Ensuite, vérifiez qu'il a été chargé en recherchant un objet qu'il définit. Si l'objet n'apparaît pas, insérez un autre élément SCRIPT pour charger la copie locale. Il est probablement préférable de nettoyer le DOM et de supprimer les SCRIPT dont le chargement a échoué.

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

0
Michael Dillon