Question

I have a small script that detects the userAgent and basically writes a small ‘hello’ message with the browser the user is using. I’m using it for a small demo i’ll be showing to people, I know feature detection is better so don’t worry. It’s mainly to demo the script.

But basically, I was wondering if there is any better way to write this:

http://jsfiddle.net/m5cVf/

I need to show a quick fun little message, but instead of doing loads of ‘if’ statements for each browser, I want to put them in array and add the browser name into the function if the current browser is true, rather than calling doAlert(); multiple times.

Something like:

var browsers = chrome,safari,mozilla;

then if the browser in use is ‘true’ this would get added into the function instead of manually adding them inside each ‘if’ statement. Thanks and much appreciated!

Answer 1

You could store the browser types in an array, loop through them, and test them against the found user agent. Like this:

http://jsfiddle.net/m5cVf/5/

var browsers = [{"testWith": "chrome", "displayName": "Google Chrome"},
                {"testWith": "safari", "displayName": "Apple Safari"},
                {"testWith": "mozilla", "displayName": "Mozilla Browser"}];

function showBrowserName(browser) {
    $('.user').text(browser);
}

$(function () {
    var userAgent = navigator.userAgent.toLowerCase();

    for (var i = 0; i < browsers.length; i++) {
        var cur = browsers[i];
        if (userAgent.indexOf(cur.testWith) > -1) {
            showBrowserName(cur.displayName);
            break;
        }
    }
});