Detecting the browser using jQuery [duplicate]

问题

I am working on a page that needs to detect the browser being used (Chrome, Firefox, IE, Safari, Opera) and accordingly set a flag value from say 1 to 5 using which I want to change the source of my image tag (basically I want to display the icon image depending on the browser being currently used).

I need to this using jQuery. My initial choice was js but I guess it's not a very reliable option given that some users turn off scripts while browsing and it's possible to modify the user agent of browsers such as Opera in the Settings. Correct me if I am wrong.

Can someone please help me with the code?

Edit: The reason I am asking this question again is that other duplicate questions talk about best practices and the use of $.support vs $.browser for detection but as I understand it, $.support only checks for opacity support. Is it able to indicate exactly which browser is being used? My task of displaying the appropriate logo is very specific that needs to check only the browser name (not even the version). How can I accomplish this?

回答1:

$.browser has many options to know what's the browser. (Deprecated in 1.3)

You can use this plugin for jquery version 1.9+

回答2:

Note, Does not take user agent switching into account

/chrome|chromium|firefox|msie|opera/.exec(navigator.userAgent.toLowerCase()).toString().replace(/chrome|chromium/g, "-webkit-").replace(/firefox/g, "-moz-").replace(/msie/g, "-ms-").replace(/opera/g, "-o-")

Below js checks if the browsers style property actually supports the style properties either already present, or dynamically inserted later. Composed it primarily for animations, though could be modified to test for any css, style property in the browser. If props already present in stylesheet, vendor prefixes are inserted into stylesheet. If props are later dynamically inserted, vendor prefixes are also inserted, or attached onto those props for functionality

    //  prefix.1.1.min.js 2013, 2014 guest271314
    //  add css `prefixes`
    //  TODO: `opera` compatibility; utilizes `-o-`, `-webkit-`, w3c
    (function prefix() {
        /* var el = $(selector).get(0), i.e.g, $("body").get(0), $("#animated").get(0) */
        var prefixes = {"MozAnimation": "-moz-","webkitAnimation": "-webkit-"
                       ,"msAnimation": "-ms-","oAnimation": "-o-"};
        var props = ["animation", "backface-visibility", "border-radius"
                    , "box-shadow", "transform", "transform-style", "transition"];
        $.each(prefixes, function(key, val) {
            $("style")
            .attr({"data-prefix": val,"class": String(val).replace(/-/g, "")});
            return !(key in el.style);
        });
        $.each(props, function(index, value) {
            var cssPrefix = $("style").attr("data-prefix");
            if (value in el.style === false) {
                $.fn.pfx = function(prop, pfxprop, q) {
                    return $("style").html($("style").text()
                           .replace(new RegExp(prop, "g"), q 
                           + $("style").attr("data-prefix") + pfxprop))
                };
                $("style").pfx("@keyframes", "keyframes", "@")
                .pfx(value, value, "");
            };
        });
    }());

github https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js

来源：https://stackoverflow.com/questions/22746962/detecting-the-browser-using-jquery

标签

jquery

browser