web-dev-qa-db-fra.com

Zepto se replie sur jQuery

J'utilise ZeptoJS pour mon application Web, mais j'aimerais revenir à jQuery si le navigateur ne prend pas en charge Zepto. Puisque IE est le seul navigateur majeur non pris en charge pour le moment, je suis tenté de détecter IE:

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

mais je préférerais détecter spécifiquement le support Zepto et utiliser jQuery dans d'autres cas. Existe-t-il un moyen de détection de fonctionnalité pour faire cela?

javascriptjquerybrowser-detectionzepto
26
jos3000

Cela pourrait être une idée folle (je ne suis pas sûr si Zepto sera même chargé sur un navigateur non pris en charge), mais qu’en est-il de l’utilisation du système de détection de navigateur de Zepto pour voir s’il s’agit d’un navigateur non pris en charge?

$.os.ios      // => true if running on Apple iOS
$.os.Android  // => true if running on Android
$.os.webos    // => true if running on HP/Palm WebOS
$.os.touchpad // => true if running on a HP TouchPad
$.os.version  // => string with version number, "4.0", "3.1.1", "2.1", etc.
$.os.iphone   // => true if running on iPhone
$.os.ipad     // => true if running on iPad
$.os.blackberry // => true if running on BlackBerry

Peut-être que vous pourriez faire quelque chose comme ça:

var isSupported = false;
for (os in $.os) {
    if ($.os[os] == true) { isSupported = true; }
}

Cela n'accroche pas chrome/firefox, qui fonctionne bien avec Zepto, mais cela correspond aux intentions de l'équipe Zepto, ce qui peut être meilleur ou non.

8
SimplGy

Vous pouvez également utiliser l'astuce JS décrite ici pour détecter si le navigateur est IE, et utiliser une bibliothèque de chargement de script asynchrone moderne pour charger la bibliothèque requise. Yepnope exemple:

yepnope({
  test: !+"\v1", // IE?
  yep: 'jquery.js',
  nope: 'zepto.js'
});
21
phil pirozhkov

Plutôt que de faire cela avec Javascript, je prendrais une longueur d'avance et utiliserais des instructions conditionnelles. Cela pourrait ressembler à:

<!--[if lt IE 8 ]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<![endif]-->

<!--[if !IE]>
    <script src="/js/zepto.js"></script>
<![endif]-->

Cela va directement dans vos fichiers HTML. L'extrait ci-dessus chargera jQuery, si le navigateur est Internet Explorer 7 et inférieur. Sinon, cela inclura zepto.js.

16
jAndy

Comme le dit la documentation de Zepto, si vous avez besoin de pour détecter Internet Explorer, vous pouvez utiliser ce code :

  if ('__proto__' in {}) {
    // IS NOT IE

  } else {
    // IS IE

  }

Zepto l’utilise pour s’appuyer sur jQuery, mais je l’utilise aussi comme détection de navigateur.

12
Jaime Fernandez

N'utilisez pas les commentaires conditionnels, cela ne sera pas supporté par IE10. C’est l’approche recommandée dans la documentation zepto :

Charge Zepto sur le navigateur moderne et jQuery sur IE 

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

Zepto ne fonctionne pas dans IE parce que IE ne supporte pas prototype , c'est donc la bonne façon de vérifier.

Le script ci-dessus effectue une charge dynamique mais la logique est

<script>
if ('__proto__' in {}) {
  // This is NOT IE

  } else {
    // This is IE

  }
</script>
8
gagarine
<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

C'est la méthode recommandée sur le site officiel de zepto.js. Voir http://zeptojs.com/#download

5
Ale

Bien que la plupart des réponses existantes fonctionnent correctement lors du chargement de Zepto.js via une requête supplémentaire, je sais que Zepto suffira la plupart du temps et que je souhaite simplement le fusionner avec mes scripts et charger paresseusement jQuery si nécessaire. Je mets en place un petit emballage pour Zepto.

Il exécute le test "officiel" '__proto__' in ... et lazy charge jQuery en cas d'échec. Si cela réussit, le chargement de Zepto se poursuit.

J'ai trouvé que IE8 exploserait si Zepto était même chargé. Cela corrige cela en sautant le reste du module.

Dans le cas optimiste, il n'y a pas de demande de script supplémentaire. Pour le chemin jQuery, eh bien, ces utilisateurs ne bénéficiaient pas d'une expérience rapide de toute façon.

1
mckamey

C’est un sujet ancien, mais c’est ce qui m’a été proposé et je n’étais pas satisfait de la solution dans son ensemble. Quelqu'un dans un commentaire ci-dessus a mentionné que le test officiel de zepto aurait pour résultat que zepto irait à FireFix 3.6 au lieu de JQuery, ce que je préférerais éviter si possible.

Donc, ma pensée était ... test pour voir si elle supporte une fonctionnalité HTML5ETsi ce n'est pas IE. Cela peut signifier que le plus grand jQuery ira à plus de navigateurs qu'il ne le devrait, mais je préférerais "travailler" du code gonflé à un téléchargement rapide de rien. Donc, en tout cas, en prenant la méthode isCanvasSupported () de Modernizer et le test __proto__ recommandé par zepto, je pense que cela pourrait être une bonne solution (nous n’avons pas encore eu la chance de tester):

   var isHtml5AndNotIE     = function() {
        var elem = document.createElement('canvas');
        return '__proto__' in {} && !!(elem.getContext && elem.getContext('2d'));
    };

Ensuite, utilisez simplement cette méthode dans document.write () comme dans les exemples ci-dessus ou partout où vous définissez le chemin d'accès à jquery/zepto.

Les deux seules versions de navigateur que j'ai pu voir dans une référence croisée rapide qui prennent en charge le canevas mais ne sont pas prises en charge par zepto sont: * IOS Safari 3.2 (4+ est pris en charge par Zepto) * Android 2.1 (2.2+ est supporté par Zepto)

http://zeptojs.com/#platforms

http://caniuse.com/#feat=canvas

1
Kevin Nelson

Vous devriez lever la barre un peu pour que non seulement IE8 obtienne jQuery, mais également d'autres navigateurs plus anciens. Zepto nécessite par exemple des fonctionnalités telles que Array.prototype.some. 

Zepto nécessite à peu près les mêmes fonctionnalités que picoQuery (qui est une alternative à Zepto). Dans picoQuery, ils aiment ça:

if (Array.isArray) {
   // Modern browser
   // (FF4+, IE9+, Safari 5+, Opera 10.5+, Konq 4.9+, Chrome 5+, etc)
   document.write("<script src='/js/zepto.min.js'></script>");
}
else {
   document.write("<script src='/js/jquery.js'></script>");
}

Les tableaux de compatibilité indiquent que tout navigateur prenant en charge Array.isArray prend également en charge querySelectorAll (), addEventListener (), dispatchevent, Array.prototype.indexOf et Array.prototype.some, tous utilisés dans Zepto.

picoQuery décrit ce choix ici: http://picoquery.com/the_fallback

0
rosell.dk

C'est comme ça que je le fais:

<script type="text/javascript">
if(top.execScript){ // true only in IE
    document.write("<script src='/js/jquery.js'>\x3C/script>");
}
else{
    document.write("<script src='/js/zepto.min.js'>\x3C/script>");
}
</script>
0
Timbo White