如何在不推荐使用 $.browser.msie 的情况下使用 jQuery 1.3 进行浏览器检测？答案

【问题标题】：How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?如何在不推荐使用 $.browser.msie 的情况下使用 jQuery 1.3 进行浏览器检测？
【发布时间】：2009-01-18 09:29:10
【问题描述】：

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

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

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

...好吧，我认为这就是全部：)

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

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

【问题讨论】：

我觉得问题是为什么需要在IE6和IE7之间进行判断？
因为该站点可以在除 IE 之外的所有浏览器中运行，只需对所有 IE 浏览器进行一些调整，但在 IE6 中，它完全破坏了位于完全错误位置的东西。我正在使用有效的文档类型以及其他所有类型。
说实话：如果它在 IE6 中破坏得那么严重，那你就做错了。
值得一提的是，ie6 中存在一些显示错误，必须对其进行补偿，这些错误在任何其他浏览器中都不会发生，例如将 div 放置在选择框上。 IE6 检测对于添加 iframe hack 之类的东西来隐藏选择框很有用。
@cletus 老实说，IE6 就是这样一个垃圾，奇怪的错误会导致激进的位置和“跳跃”完美的 CSS

标签： jquery css browser-detection

【解决方案1】：

是的，浏览器检测已被弃用，但被弃用的属性可能不会很快从 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);

【讨论】：

@MedicineMan：像任何 jQuery 插件一样，将它包含在页面中的某个位置，您现在就有了方法 $.browser.msie 等等。正如 kkyy 所说，这在 jQuery 源代码中存在（即使在 1.3 和 1.4 中），所以请检查一下（我建议阅读整个内容，非常有启发性）。无论如何，您可能希望从 jQuery 1.4 获取更新版本，因为它将 safari/chrome/etc 标准化为 $.browser.webkit

【解决方案2】：

我遇到了类似的情况，没有 $.support.png (p.ej.)，所以我需要使用 $.browser.version，也许我们可以继续要求更多的 $.support.XXXX 属性，根据需要。

【讨论】：

我认为这是正确的方法。运行 IE 或 Firefox 并不重要——重要的问题是“它是否支持透明 PNG？”或“它的盒子模型坏了吗？”
如果您想显示相关的屏幕截图，了解哪个浏览器可能很重要...

【解决方案3】：

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

来自描述：

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

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

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

【讨论】：

【解决方案4】：

功能支持听起来不错，但只有在它支持所有可能的“错误”时才能按预期工作。像第一个评论者一样，没有 $support.png，或 $support.stepping，或 $support.peekaboo，或一个，哦，名单还在继续。这样做的问题是，一些使浏览器兼容的代码将不可避免地最终由不需要它的浏览器执行。

【讨论】：

【解决方案5】：

浏览器检测没有在 jQuery 中被弃用。 jQuery.browser 的文档页面，其中指出：

我们建议不要使用此属性，请尝试使用特征检测代替（参见 jQuery.support）。

弃用的意思是“计划在未来删除”。这个关于嗅探功能而不是用户代理的建议只是很好的一般建议，而不是特定于 jQuery。他们只是说他们让做正确的事变得更容易。

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

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

【讨论】：

他们还声明“$.browser 属性在 jQuery 1.3 中已弃用，但没有立即删除它的计划。”

【解决方案6】：

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

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

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

【讨论】：

非常喜欢。谢谢！

【解决方案7】：

我说是从 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))
}

【讨论】：

这是不必要的，因为代码仍然存在并且在 jQuery 1.3（和 1.4）中完全可用。
以为他们走的是整个“功能”路线？

【解决方案8】：

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

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

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

jQuery 1.3 has replaced browser testing.

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

也许您应该查看What is better: CSS hacks or browser detection? 以更深入地讨论该主题。

总而言之，您应该关心是否支持某个功能，而不是它是哪个浏览器。

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

【讨论】：

是的，我知道这一点，但我的问题是我现在该怎么办？
您检查您不需要浏览器名称的功能。
哇，我不敢相信有多少人决定不支持 IE6。在我所有的企业客户中，只有 2 个（10 个）已经迁移到 IE7，而且是在 IE7 发布 2 年后。我讨厌它，但这是现实，企业客户还不信任 IE7。
我可以理解不信任 IE7。但是，在信任 IE6 的情况下，我无法理解它。 :)
浏览器支持一个特性并不等于它很好地支持它。例如，对话框在 IE6 中可以正常工作，但可能会导致可怕的内存泄漏，以至于人们可能更喜欢 IE6 根本不打开对话框并优雅降级。

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

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

我遇到了this very cool snippet by James Padolsey，它实际上通过使用条件 cmets 来区分 Internet Explorer。

我用上面的 sn-p 编译了一小段代码和来自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 略有改进。

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

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

if (Browser.Engine.trident) {

    var IEbrowser = $('body');

    IEbrowser.addClass('ie');

}

【讨论】：

【解决方案16】：

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

【讨论】：