10

我希望能够使用 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!");
  }

});
4

5 回答 5

16
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.")
}
于 2013-10-24T09:44:20.707 回答
11

不要使用 jQuery 来检测 IE 版本。请改用条件注释。

为什么?好吧,首先考虑一下为什么要针对这些旧版本。这可能是因为它们不支持您需要的某些 JS/CSS 功能。那么你真的想维护你自己的 JS 代码,你确定会在这些旧版本中运行吗?如果你走那条路,那么你需要开始考虑你编写的检测代码是否可以在 IE6 或 5 或 4 中工作......很痛苦!

而是尝试以下操作:

  1. 将模态/横幅元素添加到 HTML。
  2. 在您的主 css 文件中,使用 display: none 隐藏此元素。这确保了最新版本的 IE 和非 IE 浏览器不会看到它。
  3. 创建一个仅用于显示此元素的 IE 的 css 或 js 文件。
  4. 将此文件包含在针对您想要的 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 }

这是一个有用的条件注释参考

于 2013-10-24T09:54:02.227 回答
3
var isIE9OrBelow = function()
{
   return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}
于 2015-04-24T02:00:03.670 回答
0

$.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);
于 2013-10-24T09:36:55.740 回答
0

Sitepoint调整:

if(navigator.appVersion.indexOf("MSIE 9.") !== -1)
于 2016-12-29T10:31:51.803 回答