logo标签列表

最简单/轻量级的替代浏览器检测jQuery 1.9？

jquerybrowser-detection
64

我昨天收到几个客户的投诉，称一些代码停止了工作。显然，问题出在使用已弃用的 jQuery.browser 插件上，该插件在 jQuery 1.9 发布后停止了工作。

我（简单地）查看了 1.9 变更文档，似乎他们希望我替换一些相当庞大的库来处理那个一个函数。

是否有推荐的最轻量级的插件或代码片段可以恢复该功能？

对于这些站点需要的内容，它非常基本；我只需要最基本的 IE vs FF vs everyone else 的检测。

有什么建议吗？

7
引用 jQuery 文档中已有五年历史的消息：“我们建议不要使用这个属性，请尝试使用特性检测代替(请参见jQuery.support)。jQuery.browser 可能会在未来的 jQuery 发布版本中被移至插件中。”http://api.jquery.com/jQuery.browser/ 与 http://api.jquery.com/jQuery.support/ - feeela
使用“>1.8”，“<1.9”版本以下的jQuery。 - Jai
4
谢谢。我知道它被标记为弃用了。我有几个插件依赖于.offsetTop属性，但在各种浏览器中返回的值不同。我发现只需检查IE与Mozilla与Chrome是一个简单的解决方法。如果.offsetTop保持一致，我就不需要这样做了。 - jchwebdev
13个回答
40

我使用了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>

希望这能帮到你！

10
如果您想要捕获更新的IE浏览器，也可以添加一个检查 "trident" 的条件，代码如下：if (navigator.userAgent.match(/msie|trident/i)) {;}。 - Martin Andersson
23

为了在更新代码时允许向后兼容，jQuery Migrate被创建出来了。

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

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

现在，你所要求的不需要一个jQuery插件。查看navigator对象。

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: ""
1
谢谢。我可能会只使用导航器（navigator）。其中一些客户的网站是我从其他开发人员手中接管的，而这种情况往往会被忽略掉。（至少在我的情况下如此）。 - jchwebdev
下一个愚蠢的问题...我刚试了一下Firebug和Chrome控制台中的Navigator。两者都显示appName为Netscape，appCodeName为Mozilla。在FF上，“Vendor”是Mozilla，但在Chrome上为空白。那么...有没有一个-简单的“技巧”，还是这又是一个相当复杂的话题，没有2-3行代码的答案？ - jchwebdev
1
你也应该偶尔尝试使用"采纳答案"按钮。 - teynon
1
@jchwebdev，我会看一下navigator.userAgent。很容易就能看出字符串是否包含你要找的内容。(不要寻找精确匹配，因为版本号和插件显然会改变。) - Brad
谢谢，布拉德。我之前有点沮丧。我以为所有的“浏览器战争”垃圾都已经结束了。 - jchwebdev
var browser = { chrome: false, mozilla: false, opera: false, msie: false, safari: false }; var sBrowser, 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); - user989952
22
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进行定位。感谢这个绝妙的技巧！ - Tabetha Moe
11
在您的网站上放置此代码（如JS文件或jQuery代码之后...）：

将此代码放入您的网站中（例如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;
2
如果提及维护的源代码，并指出它是MIT许可证的话，这个答案会更好。 - Brian M. Hunt
4
我认为在这里获得分数和声望是好的，但告诉人们复制/粘贴已弃用的功能并不能解决我们首次标记$.browser为已弃用的问题。而且，是的，复制/粘贴需要遵守许可条款。请注意不要改变原意。 - Dave Methvin
我为@Synthy的代码添加了一个小型Hotfix，用于IE11检测。// hofix for IE11 detection var isIE11 = !!navigator.userAgent.match(/Trident/7./); if (isIE11) { browser.msie = "true"; delete browser.mozilla; } - chris
@DaveMethvin 这当然是正确的，但是当你只想让一些其他简单的插件工作，并且你不想弄清楚那个插件需要.browser才能工作时，这绝对是最简单的解决方法。（包括所有的jquery.migrate既过度，也有其他奇怪的副作用，我也不想试图弄清楚为什么会发生这种情况。这就是我所需要的！） - neminem
10

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

<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>
1
这段代码的作用是什么？ 因为在IE、Chrome和Mozilla中，(!navigator.userAgent.match(/mozilla/i) && !navigator.userAgent.match(/webkit/i))是false。 - Matus
是的，因为在这种情况下，我只想要支持jQuery功能的浏览器。对于任何熟悉jQuery的人来说，删除感叹号（！）或将&&更改为||应该很容易。 - Alexx Roche
没问题，我只是惊讶于被标记的答案没有回答楼主的问题。 - Matus
6
你可以不更新程序，直到你放弃使用过时的方法。
如果没有指定版本号，你真的不应该从 CDN 包含 jQuery，这在某种程度上会破坏使用 CDN 的目的（不缓存）。
以下是支持 $.browser 的最新版本 jQuery 的链接：

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

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

注意：Fancybox2仍在使用$.browser，这是我迄今看到的最常见的一个更新。

更新：Slickgrid仍在使用$.browser，截至2013年02月11日还没有更新。

最新版本和通配符版本将不再更新，您不应再使用它们。 - Kevin B
6

我将jQuery.browser中的逻辑抽象成了一个插件jquery.browser。该插件使用MIT许可证发布。

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

1
谢谢。我刚刚从1.9版本以前的jQuery源代码中拼凑出了自己的插件，然后我发现了你的插件，它具有有用的扩展功能，同时作为原始功能的完美替代品。 - Lambart
2

可以通过检查特定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。
2
1

如果您只想让第三方jQuery插件能够使用jQuery.browser.msie，这里有一个一行代码的解决方法。只需在jQuery之后包含它即可。

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

这是最简单的解决方法，但它正是我所需要的，并且确实有效，所以给你！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接