Question La meilleure façon d'utiliser jQuery hébergé par Google, mais de revenir à ma bibliothèque hébergée sur Google échoue


Quel serait un bon moyen d'essayer de charger le jQuery hébergé chez Google (ou d'autres bibliothèques hébergées par Google), mais charger ma copie de jQuery si la tentative de Google échoue?

Je ne dis pas que Google est floconneuse. Il y a des cas où la copie de Google est bloquée (apparemment en Iran, par exemple).

Aurais-je mis en place une minuterie et vérifier l'objet jQuery?

Quel serait le danger des deux copies?

Pas vraiment à la recherche de réponses comme "utilisez le Google" ou "utilisez le vôtre". Je comprends ces arguments. Je comprends également que l'utilisateur est susceptible d'avoir la version de Google en cache. Je pense à des solutions de repli pour le cloud en général.


Edit: Cette partie a été ajoutée ...

Puisque Google suggère d'utiliser google.load pour charger les bibliothèques ajax, et qu'il effectue un rappel une fois terminé, je me demande si c'est la clé de la sérialisation de ce problème.

Je sais que ça a l'air un peu fou. J'essaie juste de comprendre si cela peut être fait de façon fiable ou non.


Mise à jour: jQuery maintenant hébergé sur CDN de Microsoft.

http://www.asp.net/ajax/cdn/


982
2018-06-18 17:51


origine


Réponses:


Vous pouvez le réaliser comme ceci:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

Cela devrait être dans votre page <head> et tous les gestionnaires d'événements jQuery prêts doivent être dans le <body> pour éviter les erreurs (bien que ce ne soit pas infaillible!).

Une raison de plus pour ne pas utiliser Google-hébergé jQuery est que dans certains pays, le nom de domaine de Google est interdit.


774
2018-02-22 18:05



Le moyen le plus simple et le plus propre de le faire de loin:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

328
2018-06-22 01:15



Cela semble fonctionner pour moi:

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
    $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
    <p id="test">hello jQuery</p>
</body>
</html>

La façon dont cela fonctionne est d'utiliser le google objet que l'appel http://www.google.com/jsapi charges sur le window objet. Si cet objet n'est pas présent, nous supposons que l'accès à Google échoue. Si tel est le cas, nous chargeons une copie locale en utilisant document.write. (J'utilise mon propre serveur dans ce cas, veuillez utiliser le vôtre pour le tester).

Je teste aussi la présence de window.google.load - Je pourrais aussi faire un typeof vérifiez que les objets sont des objets ou des fonctions, le cas échéant. Mais je pense que cela fait l'affaire.

Voici juste la logique de chargement, car la mise en évidence de code semble échouer depuis que j'ai posté toute la page HTML que je testais:

if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}

Bien que je dois dire, je ne suis pas sûr que si cela est une préoccupation pour les visiteurs de votre site, vous devriez jouer avec le API Google AJAX Libraries du tout.

Fait amusant: J'ai d'abord essayé d'utiliser un bloc try..catch pour cela dans différentes versions mais je n'ai pas trouvé de combinaison aussi propre que celle-ci. Je serais intéressé de voir d'autres implémentations de cette idée, purement comme un exercice.


73
2018-06-26 20:41



Si vous avez modernizr.js intégré sur votre site, vous pouvez utiliser le yepnope.js intégré pour charger vos scripts de manière asynchrone - entre autres jQuery (avec fallback).

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

Ceci charge jQuery du Google-cdn. Ensuite, il est vérifié, si jQuery a été chargé avec succès. Sinon ("non"), la version locale est chargée. Vos scripts personnels sont également chargés - les deux indiquent que le processus de chargement est inié indépendamment du résultat du test.

Lorsque tous les processus de chargement sont terminés, une fonction est exécutée dans le cas 'MyApp.init'.

Personnellement, je préfère cette façon de chargement de script asynchrone. Et comme je m'appuie sur les tests de fonctionnalités fournis par modernizr lors de la construction d'un site, je l'ai intégré sur le site de toute façon. Il n'y a donc pas de frais généraux.


30
2018-06-26 17:02



Il y a quelques bonnes solutions ici, mais je vais aller plus loin en ce qui concerne le fichier local.

Dans un scénario où Google échoue, il faut charger une source locale mais peut-être qu'un fichier physique sur le serveur n'est pas forcément la meilleure option. J'en parle parce que je suis en train d'implémenter la même solution, mais je veux revenir à un fichier local généré par une source de données.

Mes raisons à cela sont que je veux avoir un peu d'esprit quand il s'agit de garder une trace de ce que je charge de Google par rapport à ce que j'ai sur le serveur local. Si je veux changer de version, je veux synchroniser ma copie locale avec ce que j'essaie de charger à partir de Google. Dans un environnement où il y a beaucoup de développeurs, je pense que la meilleure approche serait d'automatiser ce processus afin que tout ce que l'on aurait à faire est de changer un numéro de version dans un fichier de configuration.

Voici ma solution proposée qui devrait fonctionner en théorie:

  • Dans un fichier de configuration d'application, je stocke 3 choses: l'URL absolue de la bibliothèque, l'URL de l'API JavaScript et le numéro de version
  • Ecrire une classe qui récupère le contenu du fichier de la bibliothèque elle-même (obtient l'URL de la configuration de l'application), la stocke dans ma source de données avec le nom et le numéro de version
  • Ecrire un gestionnaire qui extrait mon fichier local de la base de données et met en cache le fichier jusqu'à ce que le numéro de version change.
  • Si cela change (dans la configuration de mon application), ma classe extraira le contenu du fichier en fonction du numéro de version, l'enregistrera en tant que nouvel enregistrement dans ma source de données, puis le gestionnaire lancera et servira la nouvelle version.

En théorie, si mon code est écrit correctement, tout ce que je devrais faire est de changer le numéro de version dans ma configuration d'application puis alto! Vous disposez d'une solution de secours automatisée et vous n'avez pas à gérer les fichiers physiques sur votre serveur.

Qu'est-ce que tout le monde pense? Peut-être que c'est exagéré, mais cela pourrait être une méthode élégante de maintenir vos bibliothèques AJAX.

Gland


20
2018-01-28 05:49



if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

Après avoir essayé d'inclure la copie de Google du CDN.

En HTML5, vous n'avez pas besoin de définir le type attribut.

Vous pouvez aussi utiliser...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');

19
2018-01-12 16:42



Vous pouvez utiliser votre fichier local en dernier recours.

Apparemment, le propre CDN de jQuery ne supporte pas https. Si c'est le cas, alors vous pourriez vouloir charger à partir de là d'abord.

Alors voici la séquence: Google CDN => Microsoft CDN => Votre copie locale.

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script> 

8
2018-02-21 16:09



Chargement conditionnel de la version et de la version de dernière génération de jQuery héritée:

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery-legacy/dist/jquery.min.js">\x3C/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery/dist/jquery.min.js">\x3C/script>')</script>
<!--<![endif]-->

7
2018-06-19 06:41



  • Étape 1: JQuery at-il échoué à charger? (vérifier jQuery variable)

Comment vérifier une variable non définie en JavaScript

  • Étape 2: Importation dynamique (sauvegarde) du fichier javascript

Comment inclure un fichier JavaScript dans un autre fichier JavaScript?


5
2018-06-05 09:02



En raison du problème d'interdiction de Google, je préfère utiliser le CDN de Microsoft http://www.asp.net/ajaxlibrary/cdn.ashx


5
2017-07-07 10:06



Voici une bonne explication à ce sujet!

Implémente également les délais de chargement et les délais d'attente!

http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/


4
2017-10-20 09:36