jQuery检测浏览器IE9及以下版本并抛出一个模式进行升级

Question

I want to be able to detect IE9 or less using jQuery (or if there's a better method?). 我希望能够使用jQuery检测IE9或更少（或者如果有更好的方法？）。 If the browser version is IE9 or less I then want to load a modal with the option to upgrade to Chrome, FF etc. 如果浏览器版本是IE9或更低，那么我想加载一个模式，可以选择升级到Chrome，FF等。

I have read that $.browser doesn't work anymore, so just wondering what the best way is to achieve what I want: 我已经读过$ .browser不再工作了，所以只是想知道实现我想要的最好方法是什么：

$(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!");
  }

});

Answer 1

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.")
}

Answer 2

Don't use jQuery for detecting IE versions. 不要使用jQuery来检测IE版本。 Use conditional comments instead. 请改用条件注释。

Why? 为什么？ Well think about why you want to target these old versions in the first place. 好吧，想想你为什么要首先瞄准这些旧版本。 It is probably because they don't support certain JS/CSS features that you need. 这可能是因为它们不支持您需要的某些JS / CSS功能。 So do you really want to maintain your own JS code that you are sure will run in these older versions? 那么你真的想要维护自己的JS代码，你肯定会在这些旧版本中运行吗？ If you go that route then you need to start thinking about whether the detection code you write will work in IE6 or 5 or 4... painful! 如果你走这条路，那么你需要开始考虑你编写的检测代码是否可以在IE6或5或4中运行......很痛苦！

Instead try the following: 而是尝试以下方法：

Add your modal/banner element to your HTML. 将您的模态/横幅元素添加到HTML中。
In your main css file, hide this element using display: none. 在主css文件中，使用display：none隐藏此元素。 This ensures that recent versions of IE and non-IE browsers will not see it. 这可确保最新版本的IE和非IE浏览器不会看到它。
Create an IE only css or js file that will reveal this element. 创建一个仅显示此元素的IE css或js文件。
Include this file inside conditional comments that target the IE versions that you want. 将此文件包含在针对所需IE版本的条件注释中。

The example below uses a simple reveal using CSS but you can easily replace this with JS if you prefer. 下面的示例使用CSS进行简单的显示，但如果您愿意，可以使用JS轻松替换它。 Just don't make it too complicated or it could easily break in early IE 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 }

Here is a useful conditional comments reference . 这是一个有用的条件注释引用。

Answer 3

var isIE9OrBelow = function()
{
   return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}

Answer 4

$.browser() is remove in jquery version 1.9 use below code in your script, $ .browser（）在jquery版本1.9中删除使用脚本中的代码，

(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);

Answer 5

从Sitepoint调整：

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

jQuery检测浏览器IE9及以下版本并抛出一个模式进行升级

问题描述

5 个解决方案

解决方案1
16 2013-10-24 09:44:20

解决方案2
11 已采纳 2013-10-24 09:54:02

解决方案3
3 2015-04-24 02:00:03

解决方案4
0 2013-10-24 09:36:55

解决方案5
0 2016-12-29 10:31:51

jQuery检测浏览器IE9及以下版本并抛出一个模式进行升级

问题描述

5 个解决方案

解决方案1 16 2013-10-24 09:44:20

解决方案2 11 已采纳 2013-10-24 09:54:02

解决方案3 3 2015-04-24 02:00:03

解决方案4 0 2013-10-24 09:36:55

解决方案5 0 2016-12-29 10:31:51

解决方案1
16 2013-10-24 09:44:20

解决方案2
11 已采纳 2013-10-24 09:54:02

解决方案3
3 2015-04-24 02:00:03

解决方案4
0 2013-10-24 09:36:55

解决方案5
0 2016-12-29 10:31:51