How to determine the Opera browser using JavaScript

Question

I want to determine that the browser of the client machines in Opera or not using JavaScript, how to do that?

Answer 1

Now that Opera uses the Chrome rendering engine, the accepted solution no longer works.

The User Agent string shows up like this:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.52 Safari/537.36 OPR/15.0.1147.132

The only identifier for Opera is the OPR part.

Here's the code I use, which should match the old Opera or the new Opera. It makes the Opera var a boolean value (true or false):

var Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);

Answer 2

The above answers no longer work in the new Opera 30. Since Opera now use Chromium. Please use the below:

var isChromium = window.chrome,
    isOpera = window.navigator.userAgent.indexOf("OPR") > -1 || window.navigator.userAgent.indexOf("Opera") > -1;
if(isChromium !== null && isOpera == true) {
   // is Opera (chromium)
} else { 
   // not Opera (chromium) 
}

The new Opera 30 release now fully uses Chromium and also changed their userAgent to OPR

Answer 3

if(window.opera){
    //do stuffs, for example
    alert(opera.version()); //10.10 
}

No kidding, there is an object opera in opera browser.

You may think, object opera is overridable, but navigator is overridable too.

UPDATE:

To get more accurate result, you could do like

if (window.opera && opera.toString() == "[object Opera]"){
    //do stuffs, tested on opera 10.10
}

And I noticed, Opera have both addEventListener and attachEvent, so there is also another way like

if (window.addEventListener && window.attachEvent){
    //do stuffs, tested on opera 10.10
}

Answer 4

The navigator object contains all the info you need. This should do:

navigator.userAgent.indexOf("Opera");

Answer 5

In Prototype.js, we use this inference:

var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';

This essentially checks that window.opera object exists and its internal [[Class]] value is "Opera". This is a more solid test than just checking for window.opera existence, since there's much less chance of some unrelated global opera variable getting in the way and resulting in false positives.

Speaking of unrelated global variable, remember that in MSHTML DOM, for example, elements can be resolved by id/name globally; this means that presence of something like <a name="opera" href="...">foo</a> in a markup will result in window.opera referencing that anchor element. There's your false positive...

In other words, test [[Class]] value, not just existence.

And of course always think twice before sniffing for browser. Oftentimes there are better ways to solve a problem ;)

P.S. There's a chance of future versions of Opera changing [[Class]] of window.opera, but that seems to be unlikely.

Answer 6

do you mind using jQuery?

then you can use jQuery.browser (see documnentation)

But the jQuery-guys recommend not to use this.

We recommend against using this property, please try to use feature detection instead (see jQuery.support)

Edit:

For Mootools: use window.opera (see documentation)