Detecting the browser using jQuery

Question

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?

Regarding your comment "I need to this using jQuery. My initial choice was js" Note that jQuery **is** javascript, it's just a javascript library. — mralexlau, Mar 30 '14 at 17:07
Also for your point about modifying the user agent of browsers, yes this is possible but probably isn't something you want to concern yourself with. imo, if a user is knowingly changing their user agent string, then they should expect to see different style behavior on websites. — mralexlau, Mar 30 '14 at 17:08
Thanks! My apology everyone I didn't realize this is a duplicate question. Unfortunately, I can not take it down. — Darth Coder, Mar 30 '14 at 17:15

score 1 · Answer 1 · answered Mar 30 '14 at 17:05

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+

answered Mar 30 '14 at 17:05

Amit Joki

58,320
7
77
95

`jQuery.browser` was deprecated in v1.3 and removed in v1.9. Docs: http://api.jquery.com/jQuery.browser/ – Mooseman Mar 30 '14 at 17:06

guest271314 · Answer 2 · 2015-05-02T08:30:30.183

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

Detecting the browser using jQuery

2 Answers2

Linked