Detección del navegador con jQuery

Hola, hoy me ha tocado detectar el tipo y versión del navegador para impedir o sugerir al usuario actualizar a una versión más reciente cuando accede a nuestra aplicación.

Para ello he utilizado jQuery y el método browser
http://api.jquery.com/jQuery.browser/

jQuery dice que está obsoleto y que será eliminado en futuras versiones, pero por el momento me ha parecido una buena opción (de hecho este post está probado con jQuery 1.4.2 y 1.4.3). De hecho, ahora la moda no es detectar el navegador sino detectar funcionalidades, mira este link que habla sobre ello http://www.anieto2k.com/2009/02/01/no-detectes-el-navegador-detecta-las-funcionalidades/

En cualquier caso y con los navegadores que tengo disponibles ahora mismo:

ie9

• $.browser.msie = true
• $.browser.version = "9.0"

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

ie9 - Modo de explorador IE8

• $.browser.msie = true
• $.browser.version = "8.0"

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)

ie9 - Modo de explorador IE7

• $.browser.msie = true
• $.browser.version = "7.0"

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)

ie9 - Vista de compatibilidad

• $.browser.msie = true
• $.browser.version = "7.0"

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8)

ie8

• $.browser.msie = true
• $.browser.version = "8.0"

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)

ie8 - Modo de explorador IE7

• $.browser.msie = true
• $.browser.version = "7.0"

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)

ie8 - Vista de compatibilidad

• $.browser.msie = true
• $.browser.version = "7.0"

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E)

firefox 3.6.12

• $.browser.mozilla = true
• $.browser.version = "1.9.2.1.2”

Mozilla/5.0 (Windows; U; Windows NT 6.1; es-ES; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12

Chrome 7.0.517.41

• $.browser.webkit = true
• $.browser.version = "534.7”
• $.browser.safari = true

Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.41 Safari/534.7

Opera 10.63

• $.browser.opera = true
• $.browser.version = "10.63”

Opera/9.80 (Windows NT 6.1; U; es-LA) Presto/2.6.30 Version/10.63

Safari 5.0.2 (7533.18.5)

• $.browser.webkit = true
• $.browser.version = "533.18.1”
• $.browser.safari = true

Mozilla/5.0 (Windows; U; Windows NT 6.1; es-ES) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5

Samsung Galaxy S (Android 2.1)

• $.browser.webkit = true
• $.browser.version = "530.17”
• $.browser.safari = true

Mozilla/5.0 (Linux; U; Android 2.1-update1; es-es; GT-I9000 Build/ECLAIR) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Samsung Galaxy S (Android 2.2)

• $.browser.webkit = true
• $.browser.version = "533.1”
• $.browser.safari = true

Mozilla/5.0 (Linux; U; Android 2.2; es-es; GT-I9000 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

iPad 1

• $.browser.webkit = true
• $.browser.version = "533.17.9”
• $.browser.safari = true

Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; es-es) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

iPhone 3

• $.browser.webkit) = true
• $.browser.version = “532.9”
• $.browser.safari) = /true

Mozilla/5.0 (iPhone; U; CPU iPhone OS_4_1 like Mac OS X; es-es) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

De este modo, el siguiente script nos valdría para detectar el tipo de navegador (ver que también se ha incluido como detectar el navegador con ASP.NET AJAX):

            //jQuery

            if ($.browser.msie) { //ie

                var version = parseInt($.browser.version);

                if (version == 8) {

                    alert("ie8");

                }

                else if (version == 7) {

                    alert("ie7");

                }

                else if (version == 6) {

                    alert("ie6");

                }

                else {

                    alert("ie");

                }

            }

            else if ($.browser.mozilla) { //firefox

                alert("firefox");

            }

            else if ($.browser.webkit) { //google chrome o safari (válido tanto para Safari como para Samsung Galaxy S, iPad y iPhone)

                alert("google chrome o safari");

            }

            else if ($.browser.opera) { //opera

                alert("opera");

            }

            //ASP.NET AJAX

            if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {

                alert("ie");

            }

            else if (Sys.Browser.agent == Sys.Browser.Firefox) {

                alert("firefox");

            }

            else if (Sys.Browser.agent == Sys.Browser.Opera) {

                alert("opera");

            }

            else if (Sys.Browser.agent == Sys.Browser.Safari) {

                //también Google Chrome, Samsung Galaxy S, iPad, iPhone, etc.

                alert("safari");

            }

            //ie - 8

            //firefox - 0

            //google chrome - 0

            //opera - 0

            //safari – 0

            //samsung galaxy s – 0

            //iPad/iPhone – 0

            alert(Sys.Browser.documentMode);

            //ie - true

            //firefox - true

            //google chrome - false

            //opera - false

            //safari – false

            //samsung galaxy s – false

            //iPad/iPhone – false

            alert(Sys.Browser.hasDebuggerStatement);

            //ie - Microsoft Internet Explorer

            //firefox - Firefox

            //google chrome - Safari

            //opera - Opera

            //safari – Safari

            //samsung galaxy s – Safari

            //iPad/iPhone – Safari

            alert(Sys.Browser.name);

            //ie - 8

            //firefox - 3.6

            //google chrome - 534.1

            //opera - 9.8

            //safari - 533.19

            //samsung galaxy s – 533.1

            //iPad – 533.17 iPhone – 532.9

            alert(Sys.Browser.version);

       

Ya como última instancia y a manubrio, este código podría servir para detectar el navegador… aunque está claro que adolece de no ser muy consistente y además nuevas versiones de los navegadores o incluso nuevos navegadores habría que tenerlos en cuenta. Además, fíjate como hay que comprobar el valor “iPad” antes que “Safari” (porque “iPad” también tiene el texto “Safari”), lo dicho, para andar por casa…

 

var userAgent = navigator.userAgent;
if (userAgent.indexOf("MSIE") != -1) {
    alert("ie");
}
else if (userAgent.indexOf("Firefox") != -1) {
    alert("firefox");
}
else if (userAgent.indexOf("Opera") != -1) {
    alert("opera");
}
else if (userAgent.indexOf("iPad") != -1) {
    alert("iPad");
}

else if (userAgent.indexOf("iPhone") != -1) {
    alert("iPhone");
}
else if (userAgent.indexOf("Android") != -1) {
    alert("Android");
}
else if (userAgent.indexOf("Chrome") != -1) {
    alert("Chrome");
}
else if (userAgent.indexOf("Safari") != -1) {
    alert("Safari");
}

Un saludo!