web-dev-qa-db-fra.com

Afficher un message si le navigateur n'est pas Internet Explorer 9 ou supérieur

Je voudrais montrer à mes utilisateurs un bar qui ressemble à ceci, si:

  1. Le navigateur n'est pas IE; ou
  2. Le navigateur est IE mais est la version 8 ou antérieure

http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png

(Notez que la capture d'écran est juste pour illustration - IE 9 est prise en charge pour mon site.)

J'ai trouvé ce plugin Nice jQuery, mais je ne veux pas utiliser de popups.

http://jreject.turnwheel.com/

Le site sur lequel je vais implémenter est un site Sharepoint 2013. Je vais donc utiliser un éditeur Web pour inclure le contenu HTML fourni.

S'il vous plaît inclure CSS si nécessaire pour qu'il ressemble à la capture d'écran?

javascriptjquerycssinternet-explorerbrowser-detection
19
Luis Valencia

HTML

IE 9 et les versions antérieures (jusqu'à, je pense, IE 4) peuvent être identifiés à l'aide de commentaires conditionnels en HTML.

Comme @Jost a noté , vous pouvez les utiliser pour avertir les utilisateurs IE sur IE 8 et les versions antérieures, comme ceci:

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

Cependant, étant donné que IE 10 a cessé de prendre en charge ces fonctionnalités, vous ne pouvez pas les utiliser pour identifier des navigateurs autres que IE.

jQuery

jQuery incluait autrefois un module de détection de navigateur ( $.browser ), mais il a été supprimé dans jQuery 1.9 . Si vous pouvez utiliser une version antérieure de jQuery (par exemple, 1.8.3 ) ou le plugin jQuery Migrate , vous pouvez l'utiliser pour afficher la bannière.

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

Détection de navigateur en général

Veuillez noter que la détection du navigateur est difficile. De nouveaux navigateurs apparaissent tout le temps, de sorte que tout plug-in de support de navigateur peut rapidement devenir obsolète, tout comme le principe sur lequel vous basez vos messages d'avertissement. La détection de navigateur de jQuery était la plus systématiquement maintenue, et même ils ont abandonné à la fin.

De nos jours, on s'attend généralement à ce que les développeurs Web écrivent du code qui fonctionne avec plusieurs navigateurs et utilisent la détection de fonctionnalités pour gérer les navigateurs qui ne prennent pas en charge les fonctionnalités qu'ils souhaitent utiliser.

Lorsque vous travaillez sur un site SharePoint, il s’agit probablement d’une utilisation interne à la société, qui est centrée sur Microsoft. On dirait que vous développez le site pour fonctionner dans IE et que vous ignorez les autres navigateurs au cours du développement.

Si vous pouvez raisonnablement vous attendre à ce que la plupart de vos utilisateurs utilisent une version d'IE, l'avertissement de commentaire conditionnel est peut-être suffisant.

12
Paul D. Waite

J'ai trouvé la question intéressante. J'ai donc élaboré un scénario pour moi-même, mais peut-être que quelqu'un d'autre peut en tirer profit. C'est pourquoi je l'ai posté comme réponse. Il retourne un objet avec les informations du navigateur et du système d'exploitation.

browser = {};
if (/Edge\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "Edge";
    browser.majorVersion = parseInt(/Edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "chrome";
    browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "firefox";
    browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
    browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "opera";
    browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = 11;
    browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
    browser.agent = "safari";
    browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
    browser.agent = false;
    browser.majorVersion = false;
    browser.version  = false;
}

if (/Windows\ NT/.test(navigator.userAgent)) {
    browser.os = "windows";
    var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
    switch(winver) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    case 6.3:
        browser.osversion = "8.1";
        break;
    case 10.0:
        browser.osversion = "10";
        break;
    default:
        browser.osversion = false;
    }
} else if (/OS\ X\ /.test(navigator.userAgent)) {
    browser.os = "os x"; // 
    browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "linux";
    browser.osversion = false;
}
10
Dany

Vérifier si le moteur de navigateur est Trident 6+ (IE 9, 10, 11) devrait faire ( demo ):

(function () {
  var trident = {
    string: navigator.userAgent.match(/Trident\/(\d+)/)
  };

  trident.version = trident.string ? parseInt(trident.string[1], 10) : null;

  if (!trident.string || trident.version < 6) {
    document.body.innerHTML = '<div class="alert">Not supported.</div>' +
      document.body.innerHTML;
  }
})();

Toutefois, le reniflement peut être interrompu dans IE 11 versions finale ou future si Microsoft décide de modifier la chaîne userAgent.

2
Pavlo

EDIT: Cela répond directement à l'OP.  

J'ai mis à jour la réponse de Dany avec deux mises à jour testées dans (IE 6,7,8,9,10,11), Chrome et Edge. Principalement parce que les mises à jour sont très difficiles à lire dans les commentaires. 

  • Pure javascript - Aucun jQuery requis 
  • IE10 rapporte IE 10 vs IE 1
  • Cela rapporte maintenant Edge
  • Aucun élément HTML spécifique requis pour préexister (autre qu'un corps)
  • Testé dans IE6, IE7, IE8, IE9, IE11, Chrome v62 et Edge
  • TODO: faites-le fonctionner correctement sous OSX Sierra et iPhone 

Le test pour Edge doit être le premier car il prétend être tout. : / 

Tout cela étant dit, la détection de navigateur "est ce qu'elle est" et nous pouvons espérer que le besoin s'en va bientôt. 

browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
    browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
    browser.agent = "MSIE";
    browser.version = 11;
} else {
    browser.agent = false;
    browser.version = false;
}

if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "Windows";

    switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
        case 6.0:
            browser.osversion = "Vista";
            break;
        case 6.1:
            browser.osversion = "7";
            break;
        case 6.2:
            browser.osversion = "8";
            break;
        default:
            browser.osversion = false;
    }
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "OS X";
    browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "Linux";
    browser.osversion = false;
}

if (browser.agent === "MSIE" && browser.version <= 9) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
    newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing 
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
    newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
}
2
Joe Johnston

Vous pouvez utiliser la compilation conditionnelle avec les commentaires conditionnels

Voici un bref aperçu de la façon dont cela pourrait fonctionner.

  1. Toujours montrer la barre
  2. Définir un drapeau en javascript. IEMinor=false
  3. Définissez l'indicateur sur true si IE <= 9, à l'aide d'une balise de script et de commentaires conditionnels.
  4. Utilisez la compilation conditionnelle pour masquer la barre si @_jscript_version > 9(non nécessaire) et IEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
  var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
  /*@cc_on @*/
  /*@if (@_jscript_version > 9)
     if (!IEMinor)
       document.getElementById("bar").style.display = "none";
  /*@end @*/
</script>

J'étais trop paresseux pour ajouter le type de script ...

Voici un exemple sur JSBin qui n'affiche pas la barre dans IE 10+ (non testé). Et le montre dans d'autres cas.

Note: je n'ai pas fait en sorte que cela ressemble exactement à la capture d'écran, vous devriez faire fonctionner cette partie

Edit: Utiliser le mode de navigation de IE pour tester contre IE <10 semble fonctionner
Edit2: Je pense que l'image IE9 est également non prise en charge, pour permettre à IE9 de modifier lte IE 9 en lt IE 9 et @_jscript_version > 9 en >= 9

2
Moritz Roessler

J'aime le html conditionnel simple. (Plus simple semble toujours mieux.)

Une autre alerte javascript plus complète est disponible sur: http://www.browser-update.org

2
Heres2u

En fait, dans SharePoint (OP mentionné que), il existe une variable intégrée browseris . Il est disponible dans la fenêtre globale. Répondre à la question OP:

  1. Le navigateur n'est pas IE;
  • utiliser browseris.fr
  1. Le navigateur est IE mais est la version 8 ou antérieure
  • utiliser browseris.ie8down

(testé dans SP2013 sur site)

0
mctl87