Vérifier si l'utilisateur utilise IE

Question

J'appelle une fonction comme celle ci-dessous en cliquant sur les divs avec une certaine classe.

Existe-t-il un moyen de vérifier, lors du lancement de la fonction, si l'utilisateur utilise Internet Explorer et de l'interrompre/annuler s'il utilise d'autres navigateurs, afin que la fonction ne soit exécutée que pour les utilisateurs d'Internet Explorer ? Les utilisateurs ici seraient tous sur IE8 ou des versions supérieures, donc je n'aurais pas besoin de couvrir IE7 et des versions inférieures.

Si je pouvais savoir quel navigateur ils utilisent, ce serait génial mais ce n'est pas obligatoire.

Exemple de fonction :

$('.myClass').on('click', function(event)
{
    // my function
});

Answer 1

C'est plusieurs années plus tard, et le Le navigateur Edge utilise désormais Chromium comme moteur de rendu.
La vérification pour IE 11 est toujours d'actualité, malheureusement.

Voici une approche plus directe, car les anciennes versions d'IE devraient avoir disparu.

if (window.document.documentMode) {
  // Do IE stuff
}

---

Voici mon ancienne réponse (2014) :

Dans Edge, le User Agent String a changé.

/**
 * detect IEEdge
 * returns version of IE/Edge or false, if browser is not a Microsoft browser
 */
function detectIEEdge() {
    var ua = window.navigator.userAgent;

    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 => return version number
       return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
    }

    // other browser
    return false;
}

Exemple d'utilisation :

alert('IEEdge ' + detectIEEdge());

Chaîne par défaut d'IE 10 :

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

Chaîne par défaut d'IE 11 :

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko 

Chaîne par défaut de Edge 12 :

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 

Chaîne par défaut de l'Edge 13 (thx @DrCord) :

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 

Chaîne par défaut de Edge 14 :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/14.14300 

Chaîne par défaut de Edge 15 :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063 

Chaîne par défaut de Edge 16 :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 

Chaîne par défaut de Edge 17 :

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 

Chaîne par défaut de Edge 18 (Insider preview) :

Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17730 

Test à CodePen :

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

Answer 2

Utilisez la méthode JavaScript ci-dessous :

function msieversion() 
{
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0) // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

Vous pouvez trouver les détails sur le site de support Microsoft ci-dessous :

Comment déterminer la version du navigateur à partir de script

Mise à jour : (support d'IE 11)

function msieversion() {

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer, return version number
    {
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    }
    else  // If another browser, return 0
    {
        alert('otherbrowser');
    }

    return false;
}

Answer 3

Si tout ce que vous voulez savoir est si le navigateur est IE ou non, vous pouvez le faire :

var isIE = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');

if ((old_ie > -1) || (new_ie > -1)) {
    isIE = true;
}

if ( isIE ) {
    //IE specific code goes here
}

Mise à jour 1 : Une meilleure méthode

Je le recommande maintenant. Elle est toujours très lisible et représente beaucoup moins de code :)

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  //IE specific code goes here
}

Merci à JohnnyFun dans les commentaires pour la réponse abrégée :)

Mise à jour 2 : Test pour IE dans CSS

Tout d'abord, si vous le pouvez, vous devriez utiliser @supports au lieu de JS pour vérifier si un navigateur prend en charge une certaine fonctionnalité CSS.

.element {
  /* styles for all browsers */
}

@supports (display: grid) {
  .element {
    /* styles for browsers that support display: grid */
  }
}

(Notez que IE ne supporte pas @supports et ignorera tous les styles placés à l'intérieur d'un fichier @supports déclaration.)

Si le problème ne peut être résolu avec @supports alors vous pouvez faire ça :

// JS

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);

if ( isIE ) {
  document.documentElement.classList.add('ie')
}

/* CSS */

.element {
  /* styles that apply everywhere */
}

.ie .element {
  /* styles that only apply in IE */
}

(Note : classList est relativement nouveau pour JS et je pense que, parmi les navigateurs IE, il ne fonctionne que dans IE11. Peut-être aussi IE10).

Si vous utilisez SCSS (Sass) dans votre projet, cela peut être simplifié :

/* SCSS (Sass) */

.element {
  /* styles that apply everywhere */

  .ie & {
    /* styles that only apply in IE */
  }
}

Mise à jour 3 : Ajout de Microsoft Edge (non recommandé)

Si vous souhaitez également ajouter Microsoft Edge dans la liste, vous pouvez procéder comme suit. Cependant, Je ne le recommande pas car Edge est un navigateur beaucoup plus compétent qu'IE.

var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident|Edge\//.test(ua);

if ( isIE ) {
  //IE & Edge specific code goes here
}

Answer 4

Ce retour true pour toute version d'Internet Explorer :

function isIE(userAgent) {
  userAgent = userAgent || navigator.userAgent;
  return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1 || userAgent.indexOf("Edge/") > -1;
}

El userAgent Le paramètre est facultatif et la valeur par défaut est l'agent utilisateur du navigateur.

Answer 5

Vous pouvez utiliser l'objet navigator pour détecter le user-navigator, vous n'avez pas besoin de jquery pour cela, les 4 commentaires ci-dessous sont déjà inclus donc ce snippet fonctionne comme prévu.

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || navigator.userAgent.indexOf("Trident/") > -1 ){ 
 // Do stuff with Internet-Exploders ... :)
}

http://www.javascriptkit.com/javatutors/navigator.shtml