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

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

Answer 2

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 3

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 4

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 5

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

 //some specific code for Mozilla

 }

Answer 6

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){}