jQuery ¿detección de navegador?

Question

¿Hay una buena manera de detectar si el navegador del usuario es Internet Explorer usando jQuery?

Tengo un problema con los gráficos PNG que utilizan IE y quiero cambiarlos por GIF solo si el usuario está viendo el sitio con IE.

Answer 1

Usted puede usando $.browser, sí, pero es una mala idea usar la detección del navegador:

if($.browser.msie) { /* IE */ } 

Una mejor opción, por ejemplo, habría $.support cuales es función detección, así:

if(!$.support.opacity) { /* IE 6-8 */ } 

$.support.opacity es falsa en los navegadores que no soportan opacity en el estilo (aunque IE 7-8 identificador de archivo PNG transparente, por lo que esto todavía no es lo ideal, dependiendo de lo que está buscando ... personalmente creo que le estarías dando a los usuarios de IE 7/8 una experiencia subóptima).

Lo que debe realmente hacer es objetivo IE6, que no apoyo PNG transparentes (sin filtro alfa), así:

<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="IE6ImageStyles.css"> 
<![endif]--> 

Answer 2

Echa un vistazo a la función $.browser.

Para detectar IE, también puede ir y mejor ir por IE conditional comments.

Ejemplo:

<!--[if IE]> 
    Special instructions for IE here 
<![endif]--> 

Answer 3

<script> 
    jQuery.each(jQuery.browser, function(i, val) { 
     $("<div>" + i + " : <span>" + val + "</span>") 
       .appendTo(document.body); 
    });</script> 

$ browser.msie
de IE

Answer 4

Sí, puedes, pero prefieren que uses jQuery.support: http://api.jquery.com/jQuery.support/.

En este caso, use jQuery.support.opacity.

Editar: suponiendo que se trata de opacidad, por supuesto.

Answer 5

Me doy cuenta de que esta no es una respuesta, pero realmente no puedo publicar esto en un comentario.

Si va a utilizar javascript, este código corrige el problema png con ie6. No lo he usado mucho, pero afaik necesitas una imagen gif transparente llamada x.gif y hace el resto automáticamente.

// JavaScript Document 

var supersleight = function() { 

    var root = false; 
    var applyPositioning = true; 

    // Path to a transparent GIF image 
    var shim   = 'x.gif'; 

    // RegExp to match above GIF image name 
    var shim_pattern = /x\.gif$/i; 



    var fnLoadPngs = function() { 
     if (root) { 
      root = document.getElementById(root); 
     }else{ 
      root = document; 
     } 
     for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) { 
      // background pngs 
      if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) { 
       bg_fnFixPng(obj); 
      } 
      // image elements 
      if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){ 
       el_fnFixPng(obj); 
      } 
      // apply position to 'active' elements 
      if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){ 
       obj.style.position = 'relative'; 
      } 
     } 
    }; 

    var bg_fnFixPng = function(obj) { 
     var mode = 'scale'; 
     var bg = obj.currentStyle.backgroundImage; 
     var src = bg.substring(5,bg.length-2); 
     if (obj.currentStyle.backgroundRepeat == 'no-repeat') { 
      mode = 'crop'; 
     } 
     obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')"; 
     obj.style.backgroundImage = 'url('+shim+')'; 
    }; 

    var el_fnFixPng = function(img) { 
     var src = img.src; 
     img.style.width = img.width + "px"; 
     img.style.height = img.height + "px"; 
     img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; 
     img.src = shim; 
    }; 

    var addLoadEvent = function(func) { 
     var oldonload = window.onload; 
     if (typeof window.onload != 'function') { 
      window.onload = func; 
     } else { 
      window.onload = function() { 
       if (oldonload) { 
        oldonload(); 
       } 
       func(); 
      }; 
     } 
    }; 

    return { 
     init: function() { 
      addLoadEvent(fnLoadPngs); 
     }, 

     limitTo: function(el) { 
      root = el; 
     }, 

     run: function() { 
      fnLoadPngs(); 
     } 
    }; 
}(); 

// limit to part of the page ... pass an ID to limitTo: 
// supersleight.limitTo('header'); 

supersleight.init(); 

Answer 6

$.browser.webkit 
$.browser.safari 
$.browser.opera 
$.browser.msie 
$.browser.mozilla 

if ($.browser.msie) { 
     //do something 
} 
else if ($.browser.mozilla) { 
     //do something else 
} 

obras con jQuery 1.3

Answer 7

$ .browser ha sido eliminado en 1,9 como se le sugirió la detección de características ahora se prefiere a través $.apoyo

Answer 8

Para una mejor detección del navegador jQuery recomienda encarecidamente el uso de una biblioteca externa como Modernizr en lugar de la dependencia de las propiedades en jQuery.support o el desuso jQuery.browser (retirado desde v1.9)