jQuery浏览器检测？

Question

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

我在IE中使用PNG图形时遇到问题，希望只有用户使用IE查看网站时才将它们替换为GIF。

- Dancer

---

你对PNG有什么问题？最好使用PHP或类似的服务器端语言根据浏览器类型来交换图形。这样做更可靠，而且对于没有JavaScript的人也能起作用。 - Thomas Clayson

Paul... 如果更容易的话，我发布了一些代码，可以实际解决 IE6 中透明 PNG 的问题。Mattias，你怎么看 $_SERVER['HTTP_USER_AGENT']？它更可靠，因为它可以在所有浏览器和所有设置中工作。 - Thomas Clayson

@Thomas Clayson，它不可靠，因为用户可以轻松更改它。 - Mattias Jakobsson

是的，但如果用户更改它，他们正在寻找不同的结果...您仍应该以此为基础构建您的网站。如果用户更改它，他们知道会发生不同的事情，特别是像这样只是寻找ie6的东西。 - Thomas Clayson

从我查看的评论中了解到，$.support被推荐使用，但它只是查看样式中支持不透明度的能力。如果我需要执行特定任务，例如根据当前使用的浏览器显示正确的浏览器标志，是否可以使用$.support实现，还是应该使用浏览器检测？ - Darth Coder

Answer 1

你可以使用$.browser，但是使用浏览器检测不是好的选择：

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

更好的选择是$.support，它是如下的特性检测：

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

$.support.opacity在不支持使用opacity进行样式设置的浏览器中为false（尽管IE 7-8可以处理透明PNG文件，但这仍然不是理想的选择，具体取决于您的需求... 我认为这会给IE 7/8用户带来次优的体验）。

你真正应该做的是针对不支持透明PNG的IE6进行定位，方法如下：

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

- Nick Craver

---

谢谢建议，Nick。我同意只针对IE6更好。 - Dancer

为了使此功能正常工作，必须使用适用于jQuery >1.9的jQuery迁移插件。由于此方法已被弃用，所以需要这样做。 - Beta033

是的，这个回答曾经是合适的，但现在不再适用了（这是jQuery的问题，而不是Nick的问题）。 - MrBoJangles

Answer 2

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

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

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

- Spiny Norman

Answer 3

$.browser已被移除于1.9版本，现在建议使用$.support来进行特性检测。

- MistereeDevlord

Answer 4

为了更好地检测浏览器，jQuery强烈建议使用外部库，如Modernizr，而不是依赖于jQuery.support中的属性或已弃用的jQuery.browser（自v1.9以后已删除）。请注意保留HTML标签。

- numediaweb

Answer 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

- CodeOverRide

---

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

另外，你的 == true 是多余的。只需调用 if ($.browser.msie) { } 就可以正常工作。 - Ortund

Answer 6

查看$.browser函数。

要检测IE，您还可以并且更好地使用IE条件注释。

示例：

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

- Sarfraz

---

我们建议不要使用这个属性，请尝试使用特性检测代替（请参见jQuery.support）。在未来的jQuery版本中，jQuery.browser可能会被移动到插件中。 - neoswf

Answer 7

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

$.browser.msie
用于IE浏览器

- Simer Twilio Toronto developer

---

谢谢Simer，我想我会只针对ie6进行目标定位。 - Dancer

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

- Thomas Clayson