Reputation: 272392

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

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

How can I do this?

Upvotes: 53

Answers (13)

prod3v3loper

Reputation: 124

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.

let _MBT_Browser = {
    client: {},
    __init: function () {
        console.log('Init Browser...');

        _MBT_Browser.client.agent = navigator.userAgent;
        console.log(_MBT_Browser.client.agent);
        _MBT_Browser.set();
    },
    set: function () {
        let browsers = ["Firefox", "MSIE", "Trident", "Safari", "Chrome", "Brave", "OPR"]; // Set the browser we want to detect
        _MBT_Browser.get(browsers);
        if (_MBT_Browser.client.current) {
            let deviceType = _MBT_Browser.isMobile() ? 'mobile' : 'desktop';
            document.documentElement.setAttribute('data-useragent', _MBT_Browser.client.current);
            document.documentElement.setAttribute('data-devicetype', deviceType);
        }
    },
    get: function (browsers) {
        let 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 < browsers.length; i++) {
            index = _MBT_Browser.client.agent.indexOf(browsers[i]); // get index

            // Special case, we need here the largest index
            if (browsers[i] === "OPR") {
                if (index > -1 && index > max) {
                    max = index;
                    _MBT_Browser.client.current = browsers[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 = browsers[i].toLowerCase();
                }
            }
        }

        // Special handling for Brave browser
        if (_MBT_Browser.client.current === "chrome") {
            if (navigator.brave && navigator.brave.isBrave) {
                navigator.brave.isBrave().then(isBrave => {
                    if (isBrave) {
                        _MBT_Browser.client.current = "brave";
                        document.documentElement.setAttribute('data-useragent', _MBT_Browser.client.current);
                    }
                });
            }
        }
    },
    isMobile: function () {
        // Regular expressions to check for mobile user agents
        let mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
        return mobileRegex.test(_MBT_Browser.client.agent);
    }
};

Use:

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

This set in HTML:

<html lang="en" data-useragent="firefox" data-devicetype="desktop">

And use with CSS to style on the browser:

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

Upvotes: 0

Fayyaz Ali

Reputation: 787

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;
}

Upvotes: 45

goodhyun

Reputation: 5002

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

Upvotes: 2

webpreneur

Reputation: 915

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.

Upvotes: 3

David Castro

Reputation: 1975

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

 //some specific code for Mozilla

 }

Upvotes: 16

Marcel Korpel

Reputation: 21763

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.)

Upvotes: 1

Mutation Person

Reputation: 30530

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?

Upvotes: 58

poo

Reputation: 1115

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

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

Upvotes: 17

kennebec

Reputation: 104850

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.

Upvotes: 4