web-dev-qa-db-fra.com

jQuery Detect navigateur IE9 et ci-dessous et jeter un modal pour mettre à niveau

Je veux être capable de détecter IE9 ou moins en utilisant jQuery (ou s'il y a une meilleure méthode?). Si la version du navigateur est IE9 ou moins, je souhaite alors charger un modal avec l'option de mise à niveau vers Chrome, FF, etc.

J'ai lu que $ .Browser ne fonctionnait plus, alors je me demandais simplement quel était le meilleur moyen de réaliser ce que je voulais:

$(document).ready(function(){

   /* Get browser */
   $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

   /* Detect Chrome */
   if($.browser.chrome){
      /* Do something for Chrome at this point */
      alert("You are using Chrome!");

      /* Finally, if it is Chrome then jQuery thinks it's 
       Safari so we have to tell it isn't */
       $.browser.safari = false;
  }

  /* Detect Safari */
  if($.browser.safari){
      /* Do something for Safari */
      alert("You are using Safari!");
  }

});
javascriptjqueryhtmlcssinternet-explorer
10
John

N'utilisez pas jQuery pour détecter les versions de IE. Utilisez plutôt des commentaires conditionnels.

Pourquoi? Réfléchissez bien à la raison pour laquelle vous souhaitez cibler ces anciennes versions. C'est probablement parce qu'ils ne prennent pas en charge certaines fonctionnalités JS/CSS dont vous avez besoin. Donc, voulez-vous vraiment conserver votre propre code JS qui fonctionnera dans ces versions antérieures? Si vous choisissez cette voie, vous devez commencer à vous demander si le code de détection que vous écrivez fonctionnera dans IE6 ou 5 ou 4 ... pénible!

Au lieu d'essayer ce qui suit:

  1. Ajoutez votre élément modal/banner à votre code HTML.
  2. Dans votre fichier css principal, masquez cet élément en utilisant display: none. Cela garantit que les versions récentes de IE et des navigateurs non-IE ne le verront pas.
  3. Créez un seul fichier css ou js IE qui révélera cet élément.
  4. Incluez ce fichier dans les commentaires conditionnels qui ciblent les versions IE que vous souhaitez.

L'exemple ci-dessous utilise une simple révélation utilisant CSS, mais vous pouvez facilement le remplacer par JS si vous préférez. Simplement, ne compliquez pas trop les choses car vous risqueriez de vous retrouver dans les premières versions IE.

#index.html
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <!--[if lte IE 9]>
      <link rel="stylesheet" type="text/css" href="ie-only.css">
    <![endif]-->
  </head>
  <body>
    <div class="ie-only">Go upgrade your browser!</div>
  </body>
</html>

#main.css
.ie-only { display: none }

#ie-only.css
.ie-only { display: block }

Voici une référence utile aux commentaires conditionnels .

11
Rupert Madden-Abbott
var browser = {
        isIe: function () {
            return navigator.appVersion.indexOf("MSIE") != -1;
        },
        navigator: navigator.appVersion,
        getVersion: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1)
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    };

if (browser.isIe() && browser.getVersion() <= 9) {

    console.log("You are currently using Internet Explorer" + browser.getVersion() + " or are viewing the site in Compatibility View, please upgrade for a better user experience.")
}
16
Sam Jones
var isIE9OrBelow = function()
{
   return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}
3
xicooc

$ .browser () est supprimé de jquery version 1.9 utilise le code ci-dessous dans votre script,

(function($) {

    var matched, browser;

    // Use of jQuery.browser is frowned upon.
    // More details: http://api.jquery.com/jQuery.browser
    // jQuery.uaMatch maintained for back-compat
    jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();

        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
            /(msie) ([\w.]+)/.exec( ua ) ||
            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
            [];

        return {
            browser: match[ 1 ] || "",
            version: match[ 2 ] || "0"
        };
    };
    // Don't clobber any existing jQuery.browser in case it's different
    if ( !jQuery.browser ) {
        matched = jQuery.uaMatch( navigator.userAgent );
        browser = {};

        if ( matched.browser ) {
            browser[ matched.browser ] = true;
            browser.version = matched.version;
        }

    // Chrome is Webkit, but Webkit is also Safari.
        if ( browser.chrome ) {
            browser.webkit = true;
        } else if ( browser.webkit ) {
            browser.safari = true;
        }
        jQuery.browser = browser;
    }
})(jQuery);
0
Rohan Kumar

Ajusté à partir de Sitepoint :

if(navigator.appVersion.indexOf("MSIE 9.") !== -1)
0
dude