¿Cómo puedo detectar Internet Explorer (IE) y Microsoft Edge usando JavaScript?

81

He mirado mucho a mi alrededor y entiendo que hay muchas formas de detectar Internet Explorer.

Mi problema es el siguiente: tengo un área en mi documento HTML que, cuando se hace clic, llama a una función de JavaScript que es incompatible con Internet Explorer de cualquier tipo. Quiero detectar si se está utilizando IE y, de ser así, establecer la variable en verdadero.

El problema es que estoy escribiendo mi código en Notepad ++, y cuando ejecuto el código HTML en el navegador, ninguno de los métodos para detectar IE funciona. Creo que el problema es que me estoy quedando sin Notepad ++. Necesito poder detectar IE, de modo que, según la variable, pueda deshabilitar esa área del sitio. He probado esto:

var isIE10 = false;

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    // this is internet explorer 10
    isIE10 = true;
   window.alert(isIE10);
}

var isIE = (navigator.userAgent.indexOf("MSIE") != -1);

if(isIE){
    if(!isIE10){
    window.location = 'pages/core/ie.htm';
    }
}

pero no funciona. ¿Cómo puedo detectar IE en Notepad ++? De eso estoy probando el HTML, pero necesito un método que funcione con eso.

editar

Noté que alguien ha marcado esto como un duplicado, y eso es comprensible. Supongo que no lo tuve claro. No puedo usar una respuesta de JQuery, por lo que esto no es un duplicado, ya que estoy pidiendo una respuesta de vainilla JS.

Editar # 2

¿Existe también una forma de detectar el navegador Microsoft Edge?

Comunidad
fuente
2
Será mucho más fácil para usted hacer que el código funcione en IE y otros navegadores en lugar de escribir código específico de IE.
Ibu
1
Si no puede simplemente arreglar su función para que funcione en IE, la mayoría considera que la detección de características es una forma mucho, mucho mejor de escribir código que la detección del navegador. Además, es mucho mejor en compatibilidad con versiones posteriores a medida que cambian los navegadores. Por ejemplo, ¿ya sabe lo que quiere hacer con Edge, el navegador más nuevo de Microsoft?
jfriend00
1
posible duplicado de jQuery: verifique si el usuario está usando IE verifique el enlace, hay muchas soluciones
num8er
Si una de las respuestas a continuación respondiera a su pregunta, la forma en que funciona este sitio, "aceptará" la respuesta, más aquí: ¿Qué debo hacer cuando alguien responde a mi pregunta ? Pero solo si su pregunta realmente ha sido respondida. Si no es así, considere agregar más detalles a la pregunta.
baao
Agregué detección de bordes a mi respuesta y también un enlace útil donde puede ver las últimas versiones.
Escéptico

Respuestas:

31

No sé por qué, pero no veo "Edge" en el userAgent como todos los demás están hablando, así que tuve que tomar otra ruta que puede ayudar a algunas personas.

En lugar de mirar navigator.userAgent, miré navigator.appName para distinguir si era IE <= 10 o IE11 y Edge. IE11 y Edge usan el appName de "Netscape", mientras que todas las demás iteraciones usan "Microsoft Internet Explorer".

Después de determinar que el navegador es IE11 o Edge, busqué navigator.appVersion. Noté que en IE11 la cadena era bastante larga con mucha información dentro. Elegí arbitrariamente la palabra "Trident", que definitivamente no está en navigator.appVersion para Edge. Probar esta palabra me permitió distinguir los dos.

A continuación se muestra una función que devolverá un valor numérico del Internet Explorer en el que se encuentra el usuario. Si está en Microsoft Edge, devuelve el número 12.

¡Buena suerte y espero que esto ayude!

function Check_Version(){
    var rv = -1; // Return value assumes failure.

    if (navigator.appName == 'Microsoft Internet Explorer'){

       var ua = navigator.userAgent,
           re  = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");

       if (re.exec(ua) !== null){
         rv = parseFloat( RegExp.$1 );
       }
    }
    else if(navigator.appName == "Netscape"){                       
       /// in IE 11 the navigator.appVersion says 'trident'
       /// in Edge the navigator.appVersion does not say trident
       if(navigator.appVersion.indexOf('Trident') === -1) rv = 12;
       else rv = 11;
    }       

    return rv;          
}
skribbz14
fuente
7
Esto devuelve 12 tanto en Edge como en Firefox.
edencorbin
@edencorbin He publicado una respuesta a continuación que se ocupa de este problema. stackoverflow.com/a/36688806/2304450
GavinoGrifoni
4
Esto no funciona. En Chrome, Opera, Firefox y (probablemente) Safari se navigator.appName == "Netscape"evalúan como verdaderos.
Jack Giffin
2
ÍDEM. Falla en Chrome, Opera, Firefox, Safari
BBaysinger
91

Aquí está la última forma correcta que conozco de cómo verificar IE y Edge:

if (/MSIE 10/i.test(navigator.userAgent)) {
   // This is internet explorer 10
   window.alert('isIE10');
}

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
    // This is internet explorer 9 or 11
    window.location = 'pages/core/ie.htm';
}

if (/Edge\/\d./i.test(navigator.userAgent)){
   // This is Microsoft Edge
   window.alert('Microsoft Edge');
}

Tenga en cuenta que no necesita la var isIE10 adicional en su código porque ahora realiza comprobaciones muy específicas.

Consulte también esta página para conocer las últimas cadenas de agentes de usuario de IE y Edge porque esta respuesta puede quedar desactualizada en algún momento: https://msdn.microsoft.com/en-us/library/hh869301%28v=vs.85%29. aspx

Escéptico
fuente
2
FWIW, cuando navigator.userAgentreviso mi Win10 / Edge VM, solo obtengo la primera parte, que no incluye la "Edge"cadena.
Dave Newton
1
¿Qué versión de Edge estás usando? ¿Podrías publicarla aquí?
Escéptico
Estoy usando VirtualBox 5.0.2 r 102096 y la imagen se llama Microsoft Edge.Win10.For.Mac.VirtualBox.zip descargado del sitio de MS el lunes 27 de agosto de 2015. El fondo del escritorio de la imagen dice Build 10240 , la página de inicio de Edge dice que estoy en la "compilación más reciente de esta máquina virtual, 20150801 ", que se muestra en Configuración como 20.10240.16384.0 .
Dave Newton
Gracias y la cadena navigator.userAgent?
Escéptico
1
Se devuelve como "Mozilla / 5.0 (Windows NT 10.0; Win64; x64)" en lugar de la cadena completa. IIRC Encontré otra pregunta SO con respecto al problema de VM / imagen.
Dave Newton
36
// detect IE8 and above, and Edge
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    ... do something
}

Explicación:

document.documentMode

Una propiedad exclusiva de IE, disponible por primera vez en IE8.

/Edge/

Una expresión regular para buscar la cadena 'Edge', que luego probamos con la propiedad 'navigator.userAgent'

Actualización de marzo de 2020

@Jam comenta que la última versión de Edge ahora informa Edgcomo el agente de usuario. Entonces el cheque sería:

if (document.documentMode || /Edge/.test(navigator.userAgent) || /Edg/.test(navigator.userAgent)) {
    ... do something
}
Chris Halcrow
fuente
2
Este es el único de esta página que funciona para mí tanto en IE como en Edge.
Meloman
1
/Edge\//.test(navigator.userAgent) Para ser más robusto, prefiero incluir la barra invertida.
jj
1
En la última versión de Edge, solo está Edg en el agente de usuario. Entonces, para probar el cromo IE, Edge y Edge, e incluyendo la barra:document.documentMode || /Edge\//.test(navigator.userAgent) || /Edg\//.test(navigator.userAgent)
Jam
Supongo que no es necesario que detecte Edge con la cadena UA "Edg", porque está basada en Chromium y probablemente no quisiera ser detectada (a diferencia de EdgeHTML)
Andrey
15

Estoy usando UAParser https://github.com/faisalman/ua-parser-js

var a = new UAParser();
var name = a.getResult().browser.name;
var version = a.getResult().browser.version;
Oren Gal
fuente
2
En general, la detección de funciones es mejor que la detección del navegador. Dicho esto, si realmente necesita detectar un navegador, usaría una biblioteca (como se sugiere aquí). Hay muchas complejidades al analizar las cadenas de agentes de usuario, una biblioteca reducirá el riesgo de error.
sandstrom
Muy útil, ninguna de las otras soluciones funcionó, este complemento funcionó perfectamente para mí.
edencorbin
11

El tema es un poco antiguo, pero dado que los scripts aquí detectan Firefox como un falso positivo (EDGE v12), aquí está la versión que uso:

function isIEorEDGE(){
  if (navigator.appName == 'Microsoft Internet Explorer'){
    return true; // IE
  }
  else if(navigator.appName == "Netscape"){                       
     return navigator.userAgent.indexOf('.NET') > -1; // Only Edge uses .NET libraries
  }       

  return false;
}

que por supuesto se puede escribir de una manera más concisa:

function isIEorEDGE(){
  return navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.userAgent.indexOf('.NET') > -1);
}
GavinoGrifoni
fuente
devuelve falso para el borde
Avión con crema batida
@CreamWhippedAirplane ¿puedes publicar aquí el resultado de navigator.appName dado por tu versión de Edge? Quizás lo cambiaron recientemente
GavinoGrifoni
@CreamWhippedAirplane parece que cambiaron navigator.appVersion: ahora ya no contiene "Trident" sino que agregan correctamente "Edge" al nombre. ¡Actualizando mi respuesta ahora mismo!
GavinoGrifoni
Esto no funcionó para mí cuando probé en browserstack.com, ¡no sé si funciona en una máquina real! Pero en el browserstack obtuve Netscapecomo appName ...
Betty St
4
Falla para IE IE 11. 11 sólo da 'Netscape' como nombreaplic no así la condición
Ankur Aggarwal
8

Esta función funcionó perfectamente para mí. También detecta Edge.

Originalmente de este Codepen:

https://codepen.io/gapcode/pen/vEJNZN

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}

Entonces puedes usarlo if (detectIE()) { /* do IE stuff */ }en tu código.

phocks
fuente
Esto funcionó para mí en 2019. Otras soluciones en esta página dieron falso positivo para Firefox, o incluso falso negativo para IE 11.
Melissa Freeman
6

Si solo desea darles a los usuarios que usan un navegador MS una advertencia o algo, este código debería ser bueno.

HTML:

<p id="IE">You are not using a microsoft browser</p>

Javascript:

using_ms_browser = navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1) || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Trident') > -1);

if (using_ms_browser == true){
    document.getElementById('IE').innerHTML = "You are using a MS browser"
}

Gracias a @GavinoGrifoni

parcheado
fuente
2

Utilice este recorte: var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;

Amin AmiriDarban
fuente
3
Esto funcionó mejor para mí, aunque la operación ternaria es redundante. navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1se evalúa como verdadero o falso, por lo que puede devolverlo / usarlo.
Kolby
2

Código de una línea para detectar el navegador.

Si el navegador es IE o Edge, devolverá verdadero;

let isIE = /edge|msie\s|trident\//i.test(window.navigator.userAgent)
shulha yahya
fuente
0

Aquí hay una clase de JavaScript que detecta IE10, IE11 y Edge.
El objeto Navigator se inyecta con fines de prueba.

var DeviceHelper = function (_navigator) {
    this.navigator = _navigator || navigator;
};
DeviceHelper.prototype.isIE = function() {
    if(!this.navigator.userAgent) {
        return false;
    }

    var IE10 = Boolean(this.navigator.userAgent.match(/(MSIE)/i)),
        IE11 = Boolean(this.navigator.userAgent.match(/(Trident)/i));
    return IE10 || IE11;
};

DeviceHelper.prototype.isEdge = function() {
    return !!this.navigator.userAgent && this.navigator.userAgent.indexOf("Edge") > -1;
};

DeviceHelper.prototype.isMicrosoftBrowser = function() {
    return this.isEdge() || this.isIE();
};
Tomás Prado
fuente
0

Si necesitamos verificar Edge, vaya con esto

if (navigator.userAgent.indexOf ("Edge")> 1) {

//do something

}

prasanth pr
fuente
-4

En primer lugar, seguro que no es el problema de Notepad ++. Es su " problema de coincidencia de cadenas "

La cadena común en todas las versiones de IE es MSIE. Consulte las diversas cadenas de userAgent en http://www.useragentstring.com/pages/Internet%20Explorer/

if(navigator.userAgent.indexOf("MSIE") != -1){
   alert('I am Internet Explorer!!');
}
Amit Prabhu Parrikar
fuente
Intenté esto, no funciona. Ejecuté el código de notepad ++ en IE y no hubo alerta. Revisé la consola del depurador y no hubo errores. Estoy ejecutando Windows 7, no estoy seguro de si eso afecta la versión de IE
¿Cuál es la versión de IE que está utilizando?
Amit Prabhu Parrikar