[AnalyticLunatic]

Does anyone know of a tried and tested proper way to check which browser version (specifically in this case Internet Explorer) that a website visitor is using and prompt them to upgrade if not the most current? My website, through testing thus far, appears to be holding up minus 1 CSS3 property I am using for rounded border corners.

The site still looks fine throughout since everything is affected by the non-support and reverts to square border corners, but it looks much better with the rounded corners, and if a user is visiting without the newest version of a browser (specifically IE) I would like to prompt them to upgrade.

Any and all help appreciated!

[andrewsw]

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
function checkVersion()
{
  var msg = "You're not using Internet Explorer.";
  var ver = getInternetExplorerVersion();

  if ( ver > -1 )
  {
    if ( ver >= 8.0 ) 
      msg = "You're using a recent copy of Internet Explorer."
    else
      msg = "You should upgrade your copy of Internet Explorer.";
  }
  alert( msg );
}

If you want to check any browser and version:

navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];

    return M;
})();

Quote

navigator.sayswho[1] is the (string) version,
+navigator.sayswho[1] is a number

From SO
For IE I get: sayswho[0] == "MSIE", sayswho[1] == 9.0.

This post has been edited by andrewsw: 29 January 2013 - 06:24 PM

[AnalyticLunatic]

Thanks for the reply andrewsw! I like the sound of the any browser check, but I am a bit rusty at Javascript. I'm not quite following how to implement the 'any browser' check. Are the 2 scripts supposed to fit together in some way, or if not, how do I implement the 'any browser' check as a standalone?

My apologies for what I'm sure is a dumb question I understand the first script for the IE check fairly well, but the second one is confusing me.

[andrewsw]

Hello. Place code after the 2nd script such as:

if (navigator.sayswho[0] == "MSIE") {
    // it's IE
    if (parseFloat(navigator.sayswho[1]) < 9) {
        // and it's less than version 9
    }
}

Initially, though, use alert(navigator.sayswho[0]); and [1] (or use console.log) so that you can check the values that you receive on different browsers and versions.

You might use parseInt() rather than parseFloat() if you're just interesting in distinguishing between versions 8 and 9, etc..

Actually, you can drop parseFloat as the value returned in .sayswho[1] is a number anyway.

This post has been edited by andrewsw: 30 January 2013 - 10:52 AM

[AnalyticLunatic]

Wait, now I'm lost?

// Second Script
navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];

    return M;
})();

// New Segment
if (navigator.sayswho[0] == "MSIE") {
    // it's IE
    if (parseFloat(navigator.sayswho[1]) < 9) {
        // and it's less than version 9
    }
}

How do I merge the two, let alone call the function if I make it an external .js file?

onload="navigator.saysWho()"

?

This post has been edited by AnalyticLunatic: 30 January 2013 - 12:08 PM

[andrewsw]

You don't need to call the function at all; it is an IIFE (immediately invoked function expression). It runs as soon as it is encountered in the code, attaching the result (sayswho) as an attribute on the navigator object.

As long as 'Second Script' occurs before 'New Segment' (as you have above) you will be fine. Added: It will probably still work even if they are in the wrong order - but I would keep them in the correct order.

It shouldn't need to wait for the page to load before running as it doesn't refer to any elements on the page, just the navigator object - which should, I believe, be available as soon as the page starts to load.

BTW If you attach your scripts at the bottom of the page, just before the closing BODY tag, then you wouldn't need to use window.onload.

This post has been edited by andrewsw: 30 January 2013 - 12:34 PM

[andrewsw]

BTW Suggesting to a user that they upgrade their browser is considered a poor practice; although, a discrete, polite, message is probably acceptable.

This post has been edited by andrewsw: 30 January 2013 - 12:45 PM

[AnalyticLunatic]

Ok, thanks for elaborating on that (I've never used or heard of IIFE before).

Now, just for clarity sake, how do I place the code into my html code? I was originally looking to do an external .js file I could just call from each page instead of copying and pasting the entire code in each page.

Something like:

<script type="text/javascript" src="checkBrowserVersion.js"></script> 

checkBrowserVerson.js:

// Second Script
navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];

    return M;
})();

// New Segment
if (navigator.sayswho[0] == "MSIE") {
    // it's IE
    if (parseFloat(navigator.sayswho[1]) < 9) {
        // and it's less than version 9
    }
}

EDIT: I don't know if it would be possible, but my ultimate goal would be a way to check their browser, and if out of date, immediately have the browser upgrade prompt load for them. I don't wish to simply alert them, but rather a way to have the browser itself prompt them to upgrade so they can take advantage of full site functionality. Maybe prompt them like once every 2 weeks or something.

I don't know if this is a simple possibility or not, just looking for help if it is As I said originally, the site does function fine, but with the CSS3 properties, it is more visually palatable.

EDIT2: What would you recommend for proper procedure regarding this matter, a 'polite' message as you say?

This post has been edited by AnalyticLunatic: 30 January 2013 - 12:49 PM

[andrewsw]

Yes, you can just include the JS file.

You could just provide a helpful link to the relevent MS upgrade page. You could provide a DIV that pops up above your page containing this link to the upgrade page. You could store a cookie and check it in two weeks.

However, I am in favour of a polite message and a link to the relevant MS page (or just do nothing at all about it - let them suffer!). I'll leave you to work out the other details if you wish to pursue them . Personally, I would just leave your page and probably not come back!!

[rajdeep01]

// Second Script
02 navigator.sayswho= (function(){
03 var N= navigator.appName, ua= navigator.userAgent, tem;
04 var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
05 if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
06 M= M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
07
08 return M;
09 })();
10
11 // New Segment
12 if (navigator.sayswho[0] == "MSIE") {
13 // it's IE
14 if (parseFloat(navigator.sayswho[1]) < 9) {
15 // and it's less than version 9
16 }
17 }