In Javascript, how do I determine if my current browser is Firefox on a computer vs everything else?

Question

if(firefox and is on a computer){
alert('using firefox on a computer')
}else{
alert("using something else!");
}

How can I do this?

Answer 1

What you're after is known as browser detection:

if ($.browser.mozilla) { ... 

However, browser sniffing is discouraged, as its easy to spoof the user agent, i.e. pretend to be another browser!

You'd best use feature detection, either in your own way, or through the jQuery.support interface: http://api.jquery.com/jQuery.support/

Here's an article on extending it for your own use: http://www.waytoocrowded.com/2009/03/14/jquery-supportminheight/

Edit:

Found this post as well which helps: When IE8 is not IE8 what is $.browser.version?

Answer 2

I am doing some thing like below;

function checkBrowser(){
    let browser = "";
    let c = navigator.userAgent.search("Chrome");
    let f = navigator.userAgent.search("Firefox");
    let m8 = navigator.userAgent.search("MSIE 8.0");
    let m9 = navigator.userAgent.search("MSIE 9.0");
    if (c > -1) {
        browser = "Chrome";
    } else if (f > -1) {
        browser = "Firefox";
    } else if (m9 > -1) {
        browser ="MSIE 9.0";
    } else if (m8 > -1) {
        browser ="MSIE 8.0";
    }
    return browser;
}

Answer 3

Like this: Check for Firefox. Or some other browser.

 window.onload = function() {
          //  alert(navigator.userAgent);
            if (navigator.userAgent.indexOf("Firefox") > 0) {
                alert("ff");
            }
        }

Answer 4

if (navigator.userAgent.indexOf("Firefox") != -1) {

 //some specific code for Mozilla

 }

Answer 5

It's better to detect features you need, not a browser. For example, if you need to know if foo() is supported, you can check it with if(foo){}

Answer 6

navigator.sayswho= (function(){
  var N= navigator.appName, ua= navigator.userAgent, tem;
  var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
  if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
  M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
  return M.join(' ');
 })();

as the name suggests, this is who the browser says it is- but use object detection before asking it to actually do anything...

I use it for logging errors from users and in testing code in multiple browsers- where I know the userAgent strings.

Answer 7

For a quick and dirty solution just do the following, it is cleaner to use includes() when you are searching the 'Firefox' keyword in the NavigatorID.userAgent property than indexOf().

const isFirefoxBrowser = navigator.userAgent.includes('Firefox');

WARNING:

Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable.

Read more about userAgent on MDN >>

RECOMMENDED SOLUTION:

Use feature detection instead of browser detection.

Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers.

Read more about implementing feature detection on MDN >>

Answer 8

http://api.jquery.com/jQuery.browser/

if ($.browser.mozilla) { ...

Answer 9

You can make the control with javascript's navigator.userAgent or navigator object in general,

But if you want to use something ready to go, check this:

http://www.quirksmode.org/js/detect.html

hope this helps, Sinan.

Answer 10

As already asked in a comment: why do you want this? Browser sniffing is a bad habit and there are only a few situations where it is needed.

Instead, use feature detection. As described by Nicholas Zakas, you should test relatively 'uncommon' features before using them and only rely on these tests, so you're kind of fail-safe. For example, do

if (window.XMLHttpRequest)
    var xhr = new XMLHttpRequest();

instead of

if ((brwsr.IE && brwsr.IE.version >= 7) || (brwsr.firefox) || (brwsr.opera))
    var xhr = new XMLHttpRequest();

And also don't do

if (window.XMLHttpRequest)
    // Hey, native XMLHttpRequest-support, so position: fixed is also supported

(instead, test if position: fixed is supported)

There exist several uncommon browsers with names like Kazehakase and Midori that also might, or might not, support these features, so your scripts will silently work on them when using feature detection.

But please read the mentioned article, as it contains a very good and thorough explanation of this technique. (By the way, I think that Zakas' Professional JavaScript for Web Developers is still too unknown.)

Answer 11

typeof InstallTrigger !== 'undefined'

It's simple and works well after Quantum but not sure whether this will be future-proof though: https://developer.mozilla.org/en-US/docs/Web/API/InstallTrigger

Answer 12

Any solutions that are mentioned here are not safe because the agent does not always provide the correct browser name in the first place. If you call a page with chrome you also have safari in the agent. That means if safari is the first thing to happen with an if query then you have safari on elseif you have no elseif and only if then the override is overridden in this case safari. This solution is not the safest but it always takes the smallest index to get the first one. Opera is the other way around, opera is at the very back of the agent, so other browsers may differ.

/**
 * Description of Browser
 *
 * @author      Samet Tarim
 * @link        http://www.tnado.com/
 */    
var _MBT_Browser = {
    client: {},
    __init: function () {

        console.log('Init Browser...');

        _MBT_Browser.client.agent = navigator.userAgent;
        _MBT_Browser.set();
    },
    set: function () {

        var browsers = ["Firefox", "MSIE", "Trident", "Safari", "Chrome", "OPR"]; // Set the browser we want to detect
        _MBT_Browser.get(browsers);
        if (_MBT_Browser.client.current) {
            document.documentElement.setAttribute('data-useragent', _MBT_Browser.client.current); // Ad HTML tag data-useragent="IE"
        }
    },
    get: function (browser) {

        var index = '',
            i = 0,
            max = 0,
            min = 1000000; // to get the min value, we set first to million, is a placeholder for the first loop

        for (; i < browser.length; i++) {

            index = _MBT_Browser.client.agent.indexOf(browser[i]); // get index

            // Special case, we need here the largest index
            if (browser[i] === "OPR") {
                if (index > -1 && index > max) {
                    min = index;
                    _MBT_Browser.client.current = browser[i].toLowerCase();
                }
            } else {
            // We hold only the smallest index number and overwrite on smaller
                if (index > -1 && index < min) {
                    min = index;
                    _MBT_Browser.client.current = browser[i].toLowerCase();
                }
            }
        }
    }
};

Use:

document.addEventListener('DOMContentLoaded', function () {
    _MBT_Browser.__init();
});

And use with CSS to style on the browser:

[data-useragent="firefox"] {
    /* Attribute has this exact value */
}

Answer 13

You can use navigator.userAgent for this. Just see if it contains Mozilla