What is the correct way to detect Opera using jQuery?

Question

Amazon.com recently updated their javascript, and it's causing problems with some Opera browsers.

Their browser detection code looks like so, but it's faulty:

    function sitbReaderIsCompatibleBrowser() {
        if (typeof(jQuery) == 'undefined') {
            return false;
        } else {
            var version = jQuery.browser.version || "0";
            var splitVersion = version.split('.');
            return (
                   (jQuery.browser.msie && splitVersion[0] >= 6)  // IE 6 and higher
                || (jQuery.browser.mozilla && (
                       (splitVersion[0] == 1 && splitVersion[1] >= 8) // Firefox 2 and higher
                    || (splitVersion[0] >= 2)
                   ))
                || (jQuery.browser.safari && splitVersion[0] >= 500) // Safari 5 and higher
                || (jQuery.browser.opera && splitVersion[0] >= 9) // Opera 5 and higher
            );
        }
}

Nothing obviously wrong jumps out at me with this code, but I've never used jQuery before so I don't know.

Even though this code looks like it's attempting to let Opera users through, when I visit the page with Opera 9.64 I get an "unsupported browser" message. If I change Opera's settings to report itself as Firefox, the page works perfectly! With that in mind, I'm pretty sure it's a problem with the script and not the browser.

Any jQuery experts have a suggestion?

You can replicate the behavior by visiting any book on Amazon and clicking the "look inside this book" link.

I'm using Opera 9.64 too but all that page is telling me is that Amazon Online Reader works best with IE > 6.0, Firefox > 1.5 or Safari > 2.0 — Ionuț G. Stan, Mar 13 '09 at 23:06
A good example of why browser detection and "unsupported browser" messages are almost always a lousy idea. — tgecho, Mar 13 '09 at 23:27
Well, *this* specific snippet of sniffing does indeed try to allow Opera, but as one of the answers below says Amazon has more browser sniffing elsewhere, including server-side sniffing, that isn't Opera-friendly. — hallvors, Aug 06 '12 at 03:13

score 20 · Answer 1 · answered Mar 13 '09 at 23:46

20

Prior to jQuery 1.3, you could use jQuery.browser:

if( $.browser.opera ){
  alert( "You're using Opera version "+$.browser.version+"!" );
}

From version 1.3, you should use jQuery.support instead.

Main reason for this is that should should avoid checking for browsers, as features may change from version to version, making your code obsolete in no time.

You should always try to use feature detection instead. This will allow you to see if current browser supports the feature you're trying to use, regardless the browser brand, version, etc.

answered Mar 13 '09 at 23:46

Seb

24,920
5
67
85

Spot-on. That's the code I'm looking for. Now hopefully Amazon will listen... :) – Mar 14 '09 at 00:04
1

To be clear, jQuery 1.3+ doesn't actually remove jQuery.browser. `"jQuery.browser will not be removed from future versions"`. But, you're right about feature detection. – Yahel Dec 20 '10 at 19:50
+1. However: There are still legitimate use cases for using jQuery.browser. Example: Opera 11 happily supports the `placeholder` attribute on `` elements, but [does not allow styling of them](http://my.opera.com/community/forums/topic.dml?id=841252&t=1296553904&page=1#comment8072202). If we just used feature detection we'd end up with an un-stylable placeholder text. Instead, use jQuery.browser to check for Opera, then fall-back to a stylable alternative. – Jess Telford Feb 06 '12 at 23:18
1

For future reference, it should be noted that jQuery 1.9 will remove jQuery.browser. – Nico Burns Jun 28 '12 at 19:32

jayarjo · Answer 2 · 2012-10-08T18:19:02.657

11

There is a special window.opera object which is present in all Opera 5+ browsers. So something as simple as:

if (window.opera && window.opera.buildNumber) { 
    // we are in Opera 
}

would be enough.

edited Oct 08 '12 at 18:19

answered Sep 28 '10 at 08:10

jayarjo

16,124
24
94
138

4

No, it will not be enough. - Because, if somewhere in the page, you have element with `id="opera"`, then `if(window.opera)` will be reporting true. In all browsers. – c69 Oct 09 '11 at 13:21
1

Then you could do this if (window.opera && window.opera.version) this will not be true in other browsers. – Igor Jerosimić Oct 06 '12 at 17:23
This might be useful for Opera mini: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ – Junior Mayhé Jan 17 '13 at 10:33
Doesn't work anymore. Use: isOpera() {return (navigator.userAgent.indexOf("OPR") !== -1)}; – lukyer Jul 25 '16 at 12:39

score 5 · Answer 3 · answered Mar 13 '09 at 23:08

5

I check for Opera like this:

if (/Opera/.test (navigator.userAgent)) // do something

Why would you want jQuery?

answered Mar 13 '09 at 23:08

Ilya Birman

9,834
4
27
31

I don't--it's Amazon. I wrote their tech support, but as usual the folks at tech support had never heard of javascript. Aargh. I figure it's more productive to send them a fix than ask for help, since a fix might actually get forwarded to a programmer instead of a CSR. – Mar 13 '09 at 23:22
2

Ahh, the best thing any web developer can do is to stop detecting browsers whatsoever :-) – Ilya Birman Mar 13 '09 at 23:35

score 5 · Answer 4 · answered Mar 13 '09 at 23:26

It is much better to detect javascript capabilities rather than browser userAgent.

ie DOM, XmlHttpRequest, eventing model (event.target vs event.srcElement), ActiveX, Java etc

By focusing on the API functions that you will require, rather than a target browser you will create a more robust set of scripts, and inevitably less special casing.

This link here at opera will probably tell you more

score 2 · Answer 5 · answered Sep 23 '12 at 05:51

2

A very simple way from Opera themselves:

if (window.opera) {
    //this browser is Opera
}

Source: http://my.opera.com/community/openweb/idopera/

answered Sep 23 '12 at 05:51

Sean Colombo

1,459
17
24

score 1 · Answer 6 · answered Nov 30 '15 at 09:07

1

I think this way is the best
if ( window.opera.version() == 12) { }
This example check if opera version is 12. Very useful when I have problems with font-face in Opera.

answered Nov 30 '15 at 09:07

score 1 · Answer 7 · answered Dec 20 '10 at 19:46

The main reason why Amazon fails on Opera is because the send different code from the server side already... If you visit the same page with Firefox and then save that page and reopen it in Opera it works fine...

But they promised to fix that sometime in January...

score 0 · Answer 8 · answered Sep 28 '10 at 08:28

0

In current HTML5 times, you can also check for browser features instead often.

if (!window.FormData) { alert("xmlhttprequest L2 FormData interface not available"); }

answered Sep 28 '10 at 08:28

sinni800

1,451
14
29

score 0 · Answer 9 · answered Mar 13 '09 at 23:14

0

I don't know for sure ( i never really check for opera anyway) but if the built-in jQuery functionality doesn't detect opera, may be a bug with the jQuery which needs to be fixed. I would suspect if that's the case, it should get resolved fairly quickly.

answered Mar 13 '09 at 23:14

Roy Rico

3,683
6
35
36

1

jQuery says it's Opera compatible, and the example page at http://docs.jquery.com/Utilities/jQuery.browser detects my browser perfectly. I don't think it's a jQuery bug. It has to be something about the way they are using it. – Mar 13 '09 at 23:20

What is the correct way to detect Opera using jQuery?

9 Answers9

Related