如何使用 jQuery 1.3 并弃用 $.browser.msie 进行浏览器检测？

Question

既然 jQuery 1.3 已弃用（我假设在未来版本中删除） $.browser.msie 和类似内容，应该如何进行浏览器检测？

我经常使用它来确定我们在哪个浏览器中对几乎所有浏览器进行 CSS 修复，例如：

$.browser.opera
$.browser.safari
$.browser.mozilla

... 好吧，我认为这就是所有浏览器 :)

我使用它的地方，我不确定是什么浏览器问题导致了这个问题，因为很多时候我只是试图修复浏览器中的 1 px 差异。

编辑：使用新的 jQuery 功能，无法确定您使用的是 IE6 还是 IE7。 现在应该如何确定这一点呢？

Answer 1

功能检测听起来不错，但是当我编写一些在特定浏览器中不起作用的代码时，最快的方法是浏览器检测。

使用自动边距水平居中元素适用于除 IE 之外的所有浏览器。 我要测试什么功能？ 我不知道。 但我确实知道它不能在哪种浏览器中工作。

我可以理解为什么特征检测在某些情况下会很有用，例如。 如果浏览器处于怪异/严格模式。 最好的折衷方案是同时使用这两种方法。

鉴于此“我们建议不要使用此属性，请尝试使用功能检测”应该从 jQuery.browser 文档页面中删除。 这是误导性的。

Answer 2

为什么不能重写 jquery.browser 以在内部使用 jquery.support 来根据功能确定浏览器（可能在需要时补充 jquery.browser 中的当前方法），以提供选择浏览器系列和版本的便捷方法，同时也许比今天的 jquery.browser 更可靠？

Answer 3

jQuery 1.3 已取代浏览器测试 。

坦率地说，我很惊讶 Web 开发人员如此频繁地关心他们的网站运行在什么浏览器中。在 10 多年的 Web 开发中，我可以想到一些我关心的案例，更不用说费心做任何不同的事情了。 最常见的原因是 Firefox 和 IE 之间的命名字体大小差异很大（IE 中的 font-size:large 比 FF 中的大很多），因此我使用了 IEfix.css 文件来纠正那。

也许你应该看看 哪个更好：CSS hacks 或浏览器检测? 有关该主题的更深入的讨论。

简而言之，您应该关心某个功能是否受支持，而不是它是什么浏览器。

如果不知道你为什么关心它是否是 IE，就很难再说什么了，因为你可能会发现有一个更好的解决方案来完成你正在做的事情。

Answer 4

尝试 http://code.labor8.eu/geckoFix 上的 GeckoFix 脚本，它会检测到 Firefox 较低版本比 3.0 更强大，因此您可以根据需要对其进行自定义（即添加更多规则，例如检测 Firefox 2、Firefox 3、Opera 和 Safari）。 我想这可能就是你正在寻找的。 要检查用户代理，只需在地址栏中输入 javascript:alert(navigator.userAgent) 并找到一些需要在脚本中输入的特定字符。

Answer 5

我有一段 Javascript 可以在 Mozilla 和 Webkit 浏览器以及 IE8 中正常运行。 然而，在6和7中它就破裂了。 这与 CSS 无关，也与糟糕的 Javascript 无关，而是 IE<8 的糟糕支持。

我可以看到人们从哪里来检查“功能”而不是浏览器嗅探，但是，嗅探可用的功能与破坏代码无关，那么浏览器嗅探和功能嗅探之间有什么区别，直到$.support 对象中提供所有功能吗？

Answer 6

我想指出的是，navigator.userAgent 不太值得信赖，因为它很容易修改，并且可能不代表查看页面的实际浏览器。
这可能是 $.browser 最初被弃用的原因之一。

但为了解决这个问题，我们假设浏览器检测是绝对需要的。

我遇到了 James Padolsey 的这个非常酷的片段，它实际上通过使用条件注释来区分 Internet Explorer。

我用上面的代码片段和 yepnope 中的一些代码编译了一小段代码.js：

(function(window, doc) {
    window.detector = window.detector || (function() {
        var undef,
            docElement = doc.documentElement,       
            v = 3,
            div = document.createElement('div'),
            all = div.getElementsByTagName('i'),
            isGecko = ( 'MozAppearance' in docElement.style ),
            isGeckoLTE18 = isGecko && !! doc.createRange().compareNode,
            isOpera = !! ( window.opera && toString.call( window.opera ) == '[object Opera]' ),
            isWebkit = ( 'webkitAppearance' in docElement.style ),
            isNewerWebkit = isWebkit && 'async' in doc.createElement('script');

            while (
                div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                all[0]
            );

            return {
                isGecko: isGecko,
                isGeckoLTE18: isGeckoLTE18,
                isGeckoGT18: isGecko && ! isGeckoLTE18,
                isOpera: isOpera,
                isWebkit: isWebkit,
                isNewerWebkit: isWebkit && 'async' in doc.createElement('script'),
                isIE: ( v > 4 ),
                ieVersion: ( v > 4 ? v : undef )
            };
    }());
}(window, document));

这通过功能来区分浏览器。

唯一的问题是，我目前无法区分 Safari 和 Chrome（都是 Webkit 浏览器），以及 Gecko、Webkit 和 Opera 浏览器本身的版本。

我知道它并不完美，但它比 navigator.userAgent 略有改进。

Answer 7

这可能不是 IE 6 最简洁的方法，但它确实有效并且易于理解：

$(document).ready(function() {
    ie6catch = $.browser.msie + $.browser.version;
    if (ie6catch.indexOf("true6") == -1) {
        alert("This is not Internet Explorer 6");
    }
});

Answer 8

一个好主意是将浏览器作为一个类添加到 css 的 body 标记中。 不确定这是否有效，因为我不运行 Windows 并且我有一台 powerPC，但它应该将 .ie6 类添加到所有 Internet Explorer 6-9，这不是很有帮助。 使用 mooModernizr 进行其他操作。

if (Browser.Engine.trident) {

    var IEbrowser = $('body');

    IEbrowser.addClass('ie');

}​

Answer 9

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

Answer 10

是的，浏览器检测已被弃用，但已弃用的属性可能不会很快从 jQuery 中删除。 当它们被删除时，如果您仍然需要进行浏览器检测，您可以使用一个小而简单的插件轻松添加相同的功能。

所以，我的答案是暂时不做任何事情:)

编辑：我什至会为您提供一个将来使用的插件（未经测试，从 jquery 源代码复制粘贴）：

(function($) {
    var userAgent = navigator.userAgent.toLowerCase();

    $.browser = {
        version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
        safari: /webkit/.test( userAgent ),
        opera: /opera/.test( userAgent ),
        msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
        mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
    };

})(jQuery);

Answer 11

我遇到了类似的问题，没有 $.support.png （p.ej.），所以我需要使用 $.browser.version，也许我们可以继续要求更多 $.support.XXXX 属性，尽可能多如所须。

Answer 12

.browser 已被弃用，取而代之的是 .support。
更多信息在这里： jquery.support 这本质上意味着不使用浏览器嗅探，jquery 现在确实支持检测功能，并允许对浏览器可以执行的操作进行更细粒度的控制。

从描述来看：

在 jQuery 1.3 中添加了一个集合
代表存在的属性
不同的浏览器功能或错误。

jQuery 附带了许多
包括属性，你应该感觉到
自由添加您自己的。 其中许多
属性相当低级，所以
怀疑它们是否有用
在一般的日常开发中，但是
主要由插件和核心使用
开发人员。

所有支持的价值
属性是用确定的
特征检测（并且不使用任何
浏览器嗅探的形式）

Answer 13

功能支持听起来是个好主意，但只有当它支持所有可能的“错误”时，它才会按预期工作。 就像第一个评论者一样，没有 $support.png，或 $support.stepping，或 $support.peekaboo，或，哦，这样的例子不胜枚举。
这样做的问题是，一些使某个浏览器兼容的代码将不可避免地最终由不需要它的浏览器执行。

Answer 14

jQuery 中并未弃用浏览器检测。 jQuery.browser 的文档页面，其中指出：

我们建议不要使用此属性，请尝试改用功能检测（请参阅 jQuery.support）。

弃用意味着“预计将来删除”。 这个关于嗅探功能而不是用户代理的建议只是很好的一般建议，而不是特定于 jQuery 的。 他们所说的只是让人们更容易做正确的事。

然而，总是需要用户代理嗅探。 除非jQuery.support由大量开发人员每天更新，否则它不可能跟上每个浏览器每个小版本中的每个错误和每个功能。

我认为对此的困惑源于这样一个事实：在内部，jQuery 不再进行浏览器嗅探。 但实用程序 API jQuery.browser 将继续存在。

Answer 15

function browserLessThanIE7(){
   return (/MSIE ((5\\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
}

也可以正常工作...这个检查版本 5、5.5 和 6。

@Nate：将 (5\.5)|6 更改为 7，它会检查版本 7。

Answer 16

我说的是从 jQuery 1.2 的代码库对其进行逆向工程。

请参阅这部分代码：

jQuery.browser = {
    version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
    safari: /webkit/.test( userAgent ),
   opera: /opera/.test( userAgent ),
  msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

尊重 GPL 和 MIT 许可证并从代码中学习。 不要复制和粘贴。

或者专门用于嗅出 IE6。 你可以这样做：

function IsThisBrowserIE6() {
    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))
}