jQuery浏览器检测？答案

【问题标题】：jQuery browser detection?jQuery浏览器检测？
【发布时间】：2010-12-21 10:03:01
【问题描述】：

有没有使用jQuery检测用户浏览器是否为Internet Explorer的好方法？

我对使用 IE 的 PNG 图形有疑问，并且希望仅在用户使用 IE 浏览网站时将它们换成 GIF。

【问题讨论】：

您对 png 有什么问题？根据浏览器类型，使用 php 或类似的服务器端交换图形可能会更好。 a）更可靠，b）适用于没有 javascript 的人。
@Thomas Clayson，实际上没有可靠的方法来做这个服务器端。
ie6 中烦人的蓝色背景，我有一个条纹背景框，想在顶部使用 png，因为 Gif 无法正确显示
Paul ... Mattias 那么 $_SERVER['HTTP_USER_AGENT'] 呢？它更可靠，因为它适用于所有设置的所有浏览器。
是的，但如果用户更改它，他们正在寻找不同的结果......您仍然应该围绕它建立您的网站。如果用户更改它，他们知道会发生不同的事情，尤其是像这样的事情，你只是在寻找 ie6。

【解决方案1】：

你可以使用$.browser，是的，但是使用浏览器检测是个坏主意：

if($.browser.msie) { /* IE */ }

例如，更好的选择是$.support，这是特征检测，如下所示：

if(!$.support.opacity) { /* IE 6-8 */ }

$.support.opacity 在不支持 opacity 样式的浏览器中为 false（尽管 IE 7-8 处理透明 PNGs 文件，所以这仍然不理想，具体取决于您所追求的......个人我认为您会给 IE 7/8 用户带来次优体验）。

你应该真正做的是目标 IE6，它不支持透明 PNG（没有 alpha 过滤器），像这样：

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="IE6ImageStyles.css">
<![endif]-->

【讨论】：

为尼克的建议喝彩，同意最好只针对 ie6。
必须有适用于 jquery >1.9 的 jquery migrate 插件才能工作。因为这种方法已被弃用
是的，这曾一度适合作为公认的答案，但现在不再适用（这是 Jquery 的错，而不是 Nick 的错）。

【解决方案2】：

是的，你可以，但他们更喜欢你使用jQuery.support：http://api.jquery.com/jQuery.support/。

在这种情况下，请使用jQuery.support.opacity。

编辑：当然，假设这是关于不透明度的。

【讨论】：

【解决方案3】：

$.browser 已在 1.9 中删除，因为现在建议通过 $.support 首选功能检测

【讨论】：

【解决方案4】：

为了更好地检测浏览器，jQuery 强烈建议使用外部库，例如 Modernizr，而不是依赖于 jQuery.support 或已弃用的 jQuery.browser 中的属性（自 v1.9 起已删除）

【讨论】：

【解决方案5】：

$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla

if ($.browser.msie) {
        //do something
}
else if ($.browser.mozilla) {
        //do something else
}

适用于 jQuery 1.3

【讨论】：

"我们建议不要使用此属性；请尝试使用特征检测代替（请参阅 jQuery.support）。jQuery.browser 可能会在 jQuery 的未来版本中移动到插件中。"
另外，您的== true 是多余的。只需调用if ($.browser.msie) { } 也可以。

【解决方案6】：

查看$.browser 函数。

要检测 IE，您还可以更好地使用IE conditional comments。

示例：

<!--[if IE]>
  Special instructions for IE here
<![endif]-->

【讨论】：

"我们建议不要使用此属性；请尝试使用特征检测代替（请参阅 jQuery.support）。jQuery.browser 可能会在 jQuery 的未来版本中移动到插件中。"

【解决方案7】：

<script>
    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });</script>

$.browser.msie
用于 IE

【讨论】：

谢谢 Simer，不过我想我还是只针对 ie6。

【解决方案8】：

我意识到这不是一个答案 - 但我不能在评论中发布这个！

如果您要使用 javascript，此代码修复了 ie6 的 png 问题。我没怎么用过它，但是你需要一个名为 x.gif 的透明 gif 图像，它会自动完成其余的工作。

// JavaScript Document

var supersleight    = function() {

    var root = false;
    var applyPositioning = true;

    // Path to a transparent GIF image
    var shim            = 'x.gif';

    // RegExp to match above GIF image name
    var shim_pattern    = /x\.gif$/i;



    var fnLoadPngs = function() { 
        if (root) {
            root = document.getElementById(root);
        }else{
            root = document;
        }
        for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
            // background pngs
            if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
                bg_fnFixPng(obj);
            }
            // image elements
            if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
                el_fnFixPng(obj);
            }
            // apply position to 'active' elements
            if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
                obj.style.position = 'relative';
            }
        }
    };

    var bg_fnFixPng = function(obj) {
        var mode = 'scale';
        var bg  = obj.currentStyle.backgroundImage;
        var src = bg.substring(5,bg.length-2);
        if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
            mode = 'crop';
        }
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
        obj.style.backgroundImage = 'url('+shim+')';
    };

    var el_fnFixPng = function(img) {
        var src = img.src;
        img.style.width = img.width + "px";
        img.style.height = img.height + "px";
        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        img.src = shim;
    };

    var addLoadEvent = function(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    };

    return {
        init: function() { 
            addLoadEvent(fnLoadPngs);
        },

        limitTo: function(el) {
            root = el;
        },

        run: function() {
            fnLoadPngs();
        }
    };
}();

// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');

supersleight.init();

【讨论】：