Browser & version in prototype library?

Question

I am used to using Atlas. Recently i have started transitioning to jQuery and sometimes prototype. The project that i'm currently working on is using prototype.

In Prototype, is there an easy way to get the browser name and version? I've looked over the API documentation and can't seem to find it.

Solution 1

As a completion to nertzy's answer you can add the ability for detecting IE versions using this:

Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;

On the other hand you have to detect user agent details on the server side, too. Anyways browser detection is a seriously flawed strategy for writing cross-browser scripts, that's just to be used when browser feature detection fails. It's pretty easy for a user to alter his/her user agent details.

Solution 2

Prototype offers some flags you can check to get an idea as to which browser is running. Keep in mind that it's much better practice to check for the functionality you wish to use rather than check for a particular browser.

Here is the browser- and feature-detection portion of prototype.js currently in the source tree:

var Prototype = {
  Browser: {
    IE:     !!(window.attachEvent &&
      navigator.userAgent.indexOf('Opera') === -1),
    Opera:  navigator.userAgent.indexOf('Opera') > -1,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && 
      navigator.userAgent.indexOf('KHTML') === -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  },

  BrowserFeatures: {
    XPath: !!document.evaluate,
    SelectorsAPI: !!document.querySelector,
    ElementExtensions: !!window.HTMLElement,
    SpecificElementExtensions: 
      document.createElement('div')['__proto__'] &&
      document.createElement('div')['__proto__'] !== 
        document.createElement('form')['__proto__']
  },
}

So you could check if the current browser is IE by investigating the value of Prototype.Browser.IE, or alternatively, be more future-compatible and check for a particular feature like XPath with Prototype.BrowserFeatures.XPath.

Solution 3

I use this over and above Prototype's browser definitions.

Object.extend(Prototype.Browser, {
    ie6: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 6 ? true : false) : false,
    ie7: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 7 ? true : false) : false,
    ie8: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 8 ? true : false) : false,
    ie9: (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) ? (Number(RegExp.$1) == 9 ? true : false) : false
});

Hope it helps!

Solution 4

You're right - prototype doesn't provide a utility for ascertaining the browser name or version.

If you specifically need to get the browser info as a plugin, I would suggest adding the following (taken from directly jQuery):

var Browser = Class.create({
  initialize: function() {
    var userAgent = navigator.userAgent.toLowerCase();
    this.version = (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1];
    this.webkit = /webkit/.test( userAgent );
    this.opera = /opera/.test( userAgent );
    this.msie = /msie/.test( userAgent ) && !/opera/.test( userAgent );
    this.mozilla = /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent );
  }
});

Solution 5

I have prototype.js extended after:

var Prototype = { ... };

with this:

// extension
if (Prototype.Browser.IE) {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
        Prototype.BrowserFeatures['Version'] = new Number(RegExp.$1);
    }
}

Works fine for me, calling is like:

if (Prototype.Browser.IE && Prototype.BrowserFeatures['Version'] == 8) { ... }

View more solutions

Comments

[Chuck Le Butt]

This is a great solution, thanks. (It works better than Prototype's, which only distinguishes between IE, Opera, WebKit, MobileSafari and Gecko -- and with no version numbers without coding it yourself.)

[Chuck Le Butt]

Adding the line: this.chrome = /chrome/.test( userAgent ); adds recognition for... you guessed it. (Note: You also need to add: "&& !/chrome/.test( userAgent );" to the Safari line.)

[Stephan Muller]

Please not that this answer doesn't take care of IE9 (as it probably didn't exist yet when it was posted).

[Rigel Glen]

My guess is less than 10% of users don't know how to change their user agent, so I guess it's not a bad strategy

[random_user_name]

Code only answers are not good. Please explain the answer along with your code.

[jmlnik]

The last line needs to be updated for IE9! Prototype.Browser.IE8 returns true when using the latest version of the awesome browser.