Opera browser / version detect

[astralaaron]

I am having a bit of trouble detecting opera as the browser (using opera on windows right now).

 

Any tips?

 

http://www.w3schools.com/js/tryit.asp?filename=try_nav_all

 

The example on w3schools at the link above outputs this info:

 

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45

User-agent language: undefined

I've been messing with something like this:

 var ua= navigator.userAgent; M= ua.match(/(opera|opr|msie|firefox|chrome|safari)/?s*([d.]+)/i) || [];

but M finds chrome and not the OPR

[Ingolme]

Browser detection is very unreliable. Look at the userAgent string to see what Opera is giving it.

 

Why do you want to know what browser the user has?

[Hadien]

in general cross-browser javascript works via feature detection, not browser detection. Having javascript depend on a per-browser basis leads to very inflexible, weak code. if a new browser comes out or a current one has an update, you'd have to come back to this code and make it even more excessively complex.

 

an example of definening a cross-browser addEvent.

var addEvent = function (el, ev, fn) {    //for nearly every browser (W3C)    if (el.addEventListener)         el.addEventListener(ev, fn, false);    //for IE 8    else if (el.attachEvent)         el.attachEvent('on' + ev, fn);    //fallback    else         el['on' + ev] = fn;    };

the code itself has no context as to what browser is running the code, it just runs what it knows it can support. there are much better ways to write that code, but this is the most straightforward.

 

like Ingolme alluded to, unless you need to know the browser for some other reason than affect javascript code, you should probably not even try to find out.

[astralaaron]

Browser detection is very unreliable. Look at the userAgent string to see what Opera is giving it.

 

Why do you want to know what browser the user has?

 

Because I just want to know if they are on a browser which supports the Canvas. It is just for a Marquee...for newer browsers I am using a Canvas marquee that I made. For older versions I am falling back on the <marquee> element.... I can detect safari, chrome, firefox and IE without issues. It's just Opera that is giving me problems

[astralaaron]

I realize now there is an easier way to go about this... basically just attempting to create a canvas and checking for true / false

 

http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-is-not-supported

[davej]

Is Modernizr needed because if you just check "if (functionname)" the HTML5 function might exist but not work correctly?

[Hadien]

don't follow that first answer, follow the one right below it. like he said the 1st one forces you to create an element to test and that is both slow and unnecessary (but does the trick).

var canCanvas = (!!window.HTMLCanvasElement && !!window.CanvasRenderingContext2D);

I'm also using memoization here. the inital code I was gonna show you was a lot slower so I memoized it (redefined the function inside itself as a computing optimization). then after several, sevral iterations of simplifying the code I got to this

 

basically it makes the check and assigns automatically when the page loads and thus you just need to make a call like:

 

if(!canCanvas){

//do this stuff since the canvas isn't supported

}

 

I haven't tested this myself, but should hold across all browsers and most platforms (mobile devices is out of my territory though)

 

Edit: don't even need to run it as a function, just simplified it further.

Edited October 21, 2013 by Hadien

[astralaaron]

Thank you, I appreciate the response

[thescientist]

var canCanvas = (!!window.HTMLCanvasElement && !!window.CanvasRenderingContext2D);

Why the double !!'s? Why not just

 

var canCanvas = (window.HTMLCanvasElement && window.CanvasRenderingContext2D);

[Ingolme]

!! is a quick way to cast a variable to boolean. Though I don't think it's extremely important here.

[Hadien]

You're right. It is unnecessary.Since I'm using an && operator it's redundant, but in general a !! is a quick way to see if a property was defined. Though not as accurate as a typeof, especially when the variable can already be a boolean.