javascript - remover - Zepto retrocede a jQuery
removeattr display jquery (10)
Así es como lo hago:
<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>
Estoy usando ZeptoJS para mi aplicación web, pero me gustaría recurrir a jQuery si el navegador no es compatible con Zepto. Ya que IE es el único navegador principal que no es compatible en este momento, estoy tentado de detectar IE:
if(navigator.appName == ''Microsoft Internet Explorer''){
// load jquery
} else {
// load zepto
}
pero preferiría detectar específicamente el soporte de Zepto y usar jQuery en otros casos. ¿Hay una forma de detección de características para hacer esto?
Como dijo la documentación de Zepto, si necesita detectar Internet Explorer, puede usar este código :
if (''__proto__'' in {}) {
// IS NOT IE
} else {
// IS IE
}
Zep lo usa para recurrir a jQuery, pero también lo uso como detección de navegador.
Debería subir un poco la barra para que no solo IE8 obtenga jQuery, sino también otros navegadores más antiguos. Zepto, por ejemplo, requiere características como Array.prototype.some.
Zepto requiere muchas de las mismas características que picoQuery (que es una alternativa a Zepto). En picoQuery, les gusta esto:
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>");
}
De las tablas de compatibilidad tenemos que cualquier navegador que admita Array.isArray también admita querySelectorAll (), addEventListener (), dispatchevent, Array.prototype.indexOf y Array.prototype.some, todos los cuales se usan en Zepto
picoQuery describe esta elección aquí: http://picoquery.com/the_fallback
En lugar de hacer eso con Javascript, lo llevaría un paso adelante y usaría sentencias condicionales. Esto podría verse como:
<!--[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]-->
Esto va directamente a sus archivos HTML. El fragmento de código anterior cargará jQuery, si el navegador es Internet Explorer 7 o inferior. De lo contrario incluirá zepto.js.
Este es un tema antiguo, pero es lo que se me ocurrió y no estaba contento con la solución en general. Alguien en un comentario anterior mencionó que la prueba oficial de zepto resultará en que zepto vaya a FireFix 3.6 en lugar de JQuery, lo que preferiría evitar si es posible.
Entonces, mi pensamiento fue ... probar para ver si es compatible con alguna característica de HTML5 Y si no es IE. Esto puede significar que el jQuery más grande irá a más navegadores de lo que debería, pero preferiría el código hinchado "de trabajo" a una descarga rápida de nada. Entonces, de todos modos, tomando el método isCanvasSupported () de Modernizer y la prueba __proto__ recomendada por zepto, creo que esta podría ser una buena solución (aún no he tenido la oportunidad de realizar pruebas):
var isHtml5AndNotIE = function() {
var elem = document.createElement(''canvas'');
return ''__proto__'' in {} && !!(elem.getContext && elem.getContext(''2d''));
};
Luego, solo use ese método en document.write () como en los ejemplos anteriores o donde esté definiendo la ruta a jquery / zepto.
Las únicas dos versiones de navegador que pude ver en una referencia cruzada rápida que admiten lienzo pero no son compatibles con zepto son: * IOS Safari 3.2 (4+ es compatible con Zepto) * Android 2.1 (2.2+ es compatible con Zepto)
Esto podría ser una idea loca (no estoy seguro de si Zepto se cargará en un navegador no compatible), pero ¿qué hay de usar la detección del navegador de Zepto para ver si está en un navegador no compatible?
$.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
Tal vez podrías hacer algo como esto:
var isSupported = false;
for (os in $.os) {
if ($.os[os] == true) { isSupported = true; }
}
Esto no detectará Chrome / Firefox, que funciona bien con Zepto, pero sí coincide con las intenciones del equipo de Zepto para la cosa, que puede o no ser mejor.
No use los comentarios condicionales, no será compatible con IE10. Este es el enfoque recomendado de la zeptojs.com :
Cargue Zepto en el navegador moderno y jQuery en IE
<script>
document.write(''<script src='' +
(''__proto__'' in {} ? ''zepto'' : ''jquery'') +
''.js><//script>'')
</script>
Zepto no funciona en IE porque IE no es compatible con prototipos , por lo que esta es exactamente la forma correcta de verificar.
El script anterior hace una carga dinámica pero la lógica es
<script>
if (''__proto__'' in {}) {
// This is NOT IE
} else {
// This is IE
}
</script>
Si bien muchas de las respuestas existentes funcionan bien al cargar Zepto.js a través de una solicitud adicional, tengo una situación en la que sé que Zepto será suficiente la mayor parte del tiempo y solo quiero combinarlo con mis scripts y cargar jQuery de forma perezosa si es necesario. Junté una pequeña envoltura para que Zepto haga exactamente eso.
Ejecuta zeptojs.com y carga perezoso jQuery si falla. Si tiene éxito, entonces continúa cargando Zepto.
Encontré que IE8 explotaría si Zepto estuviera cargado. Esto soluciona que al saltarse el resto del módulo.
Para el caso optimista, no hay solicitudes de script adicionales. Para el camino de jQuery, bueno, esos usuarios no estaban obteniendo exactamente la experiencia rápida de todos modos.
<script>
document.write(''<script src='' + (''__proto__'' in {} ? ''zepto'' : ''jquery'') + ''.js><//script>'')
</script>
Este es el método recomendado en el sitio oficial de zepto.js. Ver http://zeptojs.com/#download