jQuery檢測瀏覽器IE9及以下版本並拋出一個模式進行升級

Question

我希望能夠使用jQuery檢測IE9或更少（或者如果有更好的方法？）。 如果瀏覽器版本是IE9或更低，那么我想加載一個模式，可以選擇升級到Chrome，FF等。

我已經讀過$ .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

不要使用jQuery來檢測IE版本。 請改用條件注釋。

為什么？ 好吧，想想你為什么要首先瞄准這些舊版本。 這可能是因為它們不支持您需要的某些JS / CSS功能。 那么你真的想要維護自己的JS代碼，你肯定會在這些舊版本中運行嗎？ 如果你走這條路，那么你需要開始考慮你編寫的檢測代碼是否可以在IE6或5或4中運行......很痛苦！

而是嘗試以下方法：

將您的模態/橫幅元素添加到HTML中。
在主css文件中，使用display：none隱藏此元素。 這可確保最新版本的IE和非IE瀏覽器不會看到它。
創建一個僅顯示此元素的IE css或js文件。
將此文件包含在針對所需IE版本的條件注釋中。

下面的示例使用CSS進行簡單的顯示，但如果您願意，可以使用JS輕松替換它。 只是不要讓它太復雜，否則它可能很容易在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 }

這是一個有用的條件注釋引用。

Answer 3

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

Answer 4

$ .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