【问题标题】:Easiest/Lightest Replacement For Browser Detection jQuery 1.9?浏览器检测 jQuery 1.9 最简单/最轻的替代品?
【发布时间】:2012-12-31 04:53:25
【问题描述】:

昨天我有几个客户抱怨某些代码停止工作。显然,它归结为使用现已弃用的 jQuery.browser 的插件,该插件昨天在 jQuery 1.9 发布时停止工作。

我(很快)查看了 1.9 更改文档,似乎他们希望我用一些相当繁重的库来替换那个一个函数。

是否有推荐的最轻量级插件或代码 sn-p 来恢复该功能?

对于这些网站的需求,这是非常基本的;我只需要最基本的检测 IE vs FF vs.

建议?

【问题讨论】:

  • 引用来自 jQuery 文档的 5 年前的消息:“我们建议不要使用此属性;请尝试改用特征检测(请参阅 jQuery.support)。jQuery.browser 可能会被移动到 jQuery 未来版本中的插件。” api.jquery.com/jQuery.browser VS。 api.jquery.com/jQuery.support
  • 使用 >1.8 ,<1.9 lesser jQuery。
  • 谢谢。我知道它已被标记为弃用。我有几个依赖于 .offsetTop 属性的插件——它不断为各种浏览器返回不同的值。我发现只检查 IE、Mozilla 和 Chrome 是一个简单的解决方法。如果 offsetTop 是一致的,我根本不需要这个。

标签: jquery browser-detection


【解决方案1】:

我使用了 Alexx Roche 回答的以下代码,但我想检测 MSIE:

<script type="text/javascript">
   $(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
   });
</script>

希望对你有帮助!

【讨论】:

  • 如果你也想捕获较新的 IE:s,也可以像这样添加对“trident”的检查:if (navigator.userAgent.match(/msie|trident/i)) {;}
【解决方案2】:

当您更新代码时,jQuery Migrate 为 created to allow for backwards compatibility

https://github.com/jquery/jquery-migrate

作为奖励,它会在您使用时记录已弃用的函数。在您解决问题时,我会尝试一下。此外,您应该为您的网站设置特定版本的 jQuery。升级很好,但一定要在将它们投入生产之前测试这些升级。如果您使用的是 CDN,您仍然可以在文件名中指定特定版本。

现在,您不需要 jQuery 插件来满足您的要求。查看the navigator object

appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
cookieEnabled: true
doNotTrack: null
geolocation: Geolocation
language: "en-US"
mimeTypes: MimeTypeArray
onLine: true
platform: "MacIntel"
plugins: PluginArray
product: "Gecko"
productSub: "20030107"
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17"
vendor: "Google Inc."
vendorSub: ""

【讨论】:

  • 谢谢。我可能只会使用导航器。我的一些客户是我从其他开发人员那里接手的网站,而这正是从裂缝中溜走的东西。 (无论如何,我的裂缝)。
  • 下一个愚蠢的问题...我刚刚在 Firebug 和 Chrome 控制台中尝试了 Navigator。两者都将 Netscape 显示为 appName,将 Mozilla 显示为 appCodeName。而“供应商”在 FF 上是 Mozilla,但在 Chrome 上是空白的。那么......是否有一个简单的“技巧”或者这个(另一个)相当复杂的主题,没有 2-3 行代码答案?
  • 您也应该尝试偶尔使用接受回答按钮。
  • @jchwebdev,我会看看navigator.userAgent。查看字符串是否包含您要查找的内容应该很容易。 (不要寻找完全匹配,因为显然版本号和插件会发生变化。)
  • 谢谢,布拉德。我之前有点沮丧。我以为所有的“浏览器战争”垃圾都 - 基本上 - 结束了。
【解决方案3】:
var browser = {
        chrome: false,
        mozilla: false,
        opera: false,
        msie: false,
        safari: false
    };
    var sUsrAg = navigator.userAgent;
    if(sUsrAg.indexOf("Chrome") > -1) {
        browser.chrome = true;
    } else if (sUsrAg.indexOf("Safari") > -1) {
        browser.safari = true;
    } else if (sUsrAg.indexOf("Opera") > -1) {
        browser.opera = true;
    } else if (sUsrAg.indexOf("Firefox") > -1) {
        browser.mozilla = true;
    } else if (sUsrAg.indexOf("MSIE") > -1) {
        browser.msie = true;
    }
    console.log(browser.msie);

【讨论】:

  • 这太棒了。非常彻底,正是我需要的。还要为此添加一些版本测试,以便我可以针对 IE9。感谢您的精彩破解!
【解决方案4】:

把这段代码放到你的站点中(比如js文件,或者jQuery的代码之后……):

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"
    };
};

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;

【讨论】:

  • 如果引用 the maintained origin 并注意到它是 MIT-licensed,这个答案将会得到改进。
  • 我想这对积分和代表有好处,但是告诉人们复制/粘贴已弃用的功能并不能解决导致我们首先弃用 $.browser 的问题。是的,复制/意大利面需要遵守许可条款。
  • 我为@Synthy 代码添加了一个用于 IE11 检测的小修补程序。 // hofix for IE11 detection var isIE11 = !!navigator.userAgent.match(/Trident\/7\./); if (isIE11) { browser.msie = "true"; delete browser.mozilla; }
  • @DaveMethvin 这当然是真的,但是当您只想让其他一些简单的插件工作并且您不想弄清楚该插件在做什么需要 .browser 工作时,这是绝对是最简单的解决方法。 (包括所有的 jquery.migrate 都是多余的,而且还有其他奇怪的副作用,我也不想弄清楚为什么会发生这种情况。这就是我所需要的!)
【解决方案5】:

当我遇到同样的问题时,我使用了以下代码:

<script type="text/javascript">
 $(document).ready(function() {
    //if (!$.browser.webkit && ! $.browser.mozilla) { //depricated
    if (!navigator.userAgent.match(/mozilla/i) && 
        ! navigator.userAgent.match(/webkit/i) ){
        alert('Let me tell you about Mozilla');
    }
 });
</script>

【讨论】:

  • 这到底应该检查什么?因为 (!navigator.userAgent.match(/mozilla/i) && !navigator.userAgent.match(/webkit/i) ) 在 IE、Chrome 和 Mozilla 中为 false
  • 是的,因为在这种情况下,我只想要支持它的浏览器中的 jQuery 功能。拉 pling (!) 或将 && 更改为 ||对 jQuery 最熟悉的人来说应该足够简单吗?
  • 没问题,我很惊讶标记的答案没有回答 OP 的问题
【解决方案6】:

在您放弃折旧的方法之前,您不能更新。

你真的不应该在不指定版本号的情况下从 CDN 中包含 jquery,这在某种程度上违背了使用 CDN 的目的(无缓存)。

这是支持 $.browser 的最新版 jQuery 的链接:

http://code.jquery.com/jquery-1.8.3.min.js

只需用该链接替换您的 jquery.js src,您的代码将继续运行,直到您准备好继续前进并停止使用已弃用的功能。

注意:Fancybox2 仍然使用 $.browser,这是自更新以来我见过的最常见的一个。

更新:Slickgrid 仍在使用$.browser,截至 2013 年 2 月 11 日没有更新

【讨论】:

  • -latest 版本和通配符版本将不再更新,您不应再使用它们。
【解决方案7】:

我将 jQuery.browser 中的逻辑抽象为一个插件jquery.browser。该插件是在 MIT 许可下发布的。

我还添加了对 IE11、Opera Webkit 和 Android 检测的支持。

【讨论】:

  • 谢谢。我刚刚从 1.9 之前的 jQuery 源代码中拼凑出我自己的插件,然后我找到了你的,它具有有用的扩展,同时可以完美地替代原始功能。
【解决方案8】:

试试Conditionizr

希望这会有所帮助:)

【讨论】:

    【解决方案9】:

    可以通过额外检查特定 IE 版本中添加的标准全局对象的存在来检测 IE 的确切版本。

    10 or older document.all
    9 or older  document.all && !window.atob
    8 or older  document.all && !document.addEventListener
    7 or older  document.all && !document.querySelector
    6 or older  document.all && !window.XMLHttpRequest
    5.x document.all && !document.compatMode
    
    if (document.all && !document.querySelector) {
        alert('IE7 or lower');
    }
    

    这些测试避免使用用于欺骗的 userAgent

    【讨论】:

      【解决方案10】:
      if(!$.browser){
          $.browser={chrome:false,mozilla:false,opera:false,msie:false,safari:false};
          var ua=navigator.userAgent;
              $.each($.browser,function(c,a){
              $.browser[c]=((new RegExp(c,'i').test(ua)))?true:false;
                  if($.browser.mozilla && c =='mozilla'){$.browser.mozilla=((new RegExp('firefox','i').test(ua)))?true:false;};
                  if($.browser.chrome && c =='safari'){$.browser.safari=false;};
              });
      };
      

      http://jsfiddle.net/R3AAX/3/

      【讨论】:

      • 为了完整起见,jQuery 插件应该引用 'jQuery' 而不是 '$',因为其他库可能会覆盖 $ 快捷方式。
      【解决方案11】:

      如果您想要的只是能够使用 jQuery.browser.msie 的 3rd 方 jQuery 插件,这里有一个单行。只需在 jQuery 之后包含它。

      jQuery.browser = jQuery.browser || {msie: navigator.userAgent.match(/msie/i) ? true : false};
      

      这是最愚蠢的解决方法,但这就是我所需要的,而且它确实有效,所以你去吧!

      【讨论】:

        【解决方案12】:

        添加到这个讨论。我刚刚想出了一个 jquery $.browser 插件,它不是“检测”,只是将用户代理解析为一个易于使用的对象。可以很容易地应用进一步的逻辑来进一步分解和解析特定的浏览器和平台。

        我在找到here: UserAgentString.com 的用户代理上得到了非常可靠的结果。我什至包括了 ie11 的版本检测(接近底部)。

        //The following code is by no means perfect, nor is it meant to be a standalone 'detection' plugin. 
        //It demonstrates parsing the useragent string into an easy to manage object. 
        //Even if it does make detection rediculously easy.. :)
        
        //Because this regex makes no assumptions in advance.
        //IMO, It's compatibilty and maintainability is much higher than those based on static identifiers.
        
        /*
          uaMatch replacement that parses a useragent string into an object
          useragent segments can be Name Value OR Name/Value OR Name
        
          Segment: Name Value
            Name: parsed to the last whitespace character
            Value: value after the last whitespace character
            Matches: (.NET CLR) (#.##), Android 2.3.4, etc
            Note: this regex can have leading/trailing whitespace (trimmed for object properties)
        
          Segment: Name/Value
            Matches: all values matching Name/Value
            Example: Firefox/24.0, Safari/533.1, Version/12.1, etc
        
          Segment: Name
            Matches: identifiers that hold no values (value of 'true' is implied)
            Example: Macintosh, Linux, Windows, KHTML, U, etc
        
        
           WARNING: not necessarily compatible with jQuery's $.browser implementation.
           - not recommended as a replacement for plugins that require it to function.
        */
        (function ($) {
        
            var ua = navigator.userAgent.toLowerCase();
        
            var regex = /compatible; ([\w.+]+)[ \/]([\w.+]*)|([\w .+]+)[: \/]([\w.+]+)|([\w.+]+)/g;
            var match = regex.exec(ua);
        
            var browser = { };
        
            while (match != null) {
                var prop = {};
        
                if (match[1]) {
                  prop.type = match[1];
                  prop.version = match[2];
                }
                else if (match[3]) {
                  prop.type = match[3];
                  prop.version = match[4];
                }
                else {
                  prop.type = match[5];
                }
        
                // some expressions have leading whitespace (i couldn't avoid this without a more complex expression)
                // trim them and get rid of '.' (' .NET CLR' = 'net_clr') 
                prop.type = $.trim(prop.type).replace(".","").replace(" ","_"); 
                var value = prop.version ? prop.version : true;
        
                if (browser[prop.type]) {
                    if (!$.isArray(browser[prop.type]))
                        browser[prop.type] = new Array(browser[prop.type]);
        
                    browser[prop.type].push(value);
                }    
                else browser[prop.type] = value;
        
                match = regex.exec(ua);
            }
        
            for (var i in browser)
                if (i.indexOf("mac") > -1)
                    browser.mac = true;
        
            if (browser.windows_nt && !browser.windows)
                browser.windows = true;
        
            //put known browsers into the 'version' property for 'some' jquery compatibility
        
            //for sake of argument chromium 'is' chrome
            if (browser.chromium && !browser.chrome)
                browser.chrome = browser.chromium;
        
            //chrome / safari / webkit
            if (browser.chrome) {
                browser.version = browser.chrome;
            }
            else if (browser.safari) {
                browser.version = browser.safari;
            }
            else {
                if (browser.applewebkit)
                    browser.webkit = browser.applewebkit;
        
                if (browser.webkit)
                    browser.version = browser.webkit;
            }
        
            //firefox / gecko
            if (browser.firefox) {
                if (browser.rv)
                    browser.version = browser.rv;
        
                else browser.version = browser.firefox;
            }
            else if (browser.gecko) {
                if (browser.rv)
                    browser.version = browser.rv;
        
                else browser.version = browser.gecko;
            }
        
            //opera
            if (browser.opera && !browser.version)
                browser.version = browser.opera;
        
            //msie
            if (browser.trident && browser.rv) //ie11
                browser.msie = browser.rv;
        
            if (browser.msie)
                browser.version = browser.msie;
        
            $.browser = browser;//Rename to reduce confliction?
        
            //WAS USED FOR TESTING & DISCOVERY (very useful)
            //TODO: remove line below
            alert(JSON.stringify($.browser));
        
        }) (jQuery);
        

        在 Internet Explorer 10 上,JSON.stringify 将输出如下内容:

        {"mozilla":"5.0","msie":"10.0","windows_nt":"6.2","trident":"6.0","net4.0e":true,"net4.0c":true,"net_clr":["3.5.30729","2.0.50727","3.0.30729"],"windows":true,"version":"10.0"}
        

        【讨论】:

          【解决方案13】:

          简短而强大。

          // chrome, safari, webkit, mozilla, msie, opera
          var chrome = /chrome/i.test(navigator.userAgent); 
          

          【讨论】:

          • 你能解释一下语法吗?我没遇到过这种结构? TIA,/铬/
          • @jchwebdev sure: var chrome [bool] /chrome/ [我们在 UA 中搜索的字符串] i [不区分大小写] test [method] (navigator.userAgent) [返回 UA 字符串当前浏览器] 所以你可以检查它是 safari、mozilla 等。
          猜你喜欢
          • 2013-01-10
          • 2013-03-18
          • 2011-02-03
          • 2013-11-26
          • 2010-09-09
          • 1970-01-01
          • 2016-02-08
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多