How to refactor old browser detection JavaScript? I'm looking to make this code more sensible, while making sure it still works as intended. The alert message at the bottom should trigger when the user is running a version of Microsoft Internet Explorer less than IE 9. But there's a lot of incomprehensible shorthand in the main code, that I need to be refactored, and simplified into long-hand, so it will make more sense to me.

Here is the code:

/*
----------------------------------------------------------
A short snippet for detecting versions of IE in JavaScript
without resorting to user-agent sniffing
----------------------------------------------------------

If you're not in IE (or IE version is less than 5) then:

ie === undefined

If you're in IE (&gt;=5) then you can determine which version:

ie === 7; // IE7

Thus, to detect IE:

if (ie) {}

And to detect the version:

ie === 6 // IE6
ie &gt; 7 // IE8, IE9 ...
ie &lt; 9 // Anything less than IE9

----------------------------------------------------------
*/

/* IE Detection Snippet. DO NOT EDIT [BELOW] THIS LINE. [BEGIN] */

var ie = (function()
{
    var undef;
    var v = 3;
    var div = document.createElement('div');
    var all = div.getElementsByTagName('i');

    while 
        (
            div.innerHTML = '&lt;!--[if gt IE ' + (++v) + ']&gt;&lt;i&gt;&lt;/i&gt;&lt;![endif]--&gt;',
            all[0]
        );

    return v &gt; 4 ? v : undef;

}());

/* IE Detection Snippet. DO NOT EDIT [ABOVE] THIS LINE. [END] */

if (ie) 
{
    if (ie &lt; 9)
        {
            alert( "You are running an older version of Microsoft Internet Explorer:\r\nVersion " + ie.toFixed(1) + ", which is NOT supported.\r\n\r\nPlease upgrade your web browser to its latest version, or if you're still using Windows XP, to Google Chrome, Mozilla Firefox, Apple Safari, or Opera, to view this website, properly.\r\n\r\nClick \"OK\" to read instructions on how to download and install a newer, more compatible, web browser.");
            window.parent.location = "/libs/old_browser_detect/current/upgrade_browser.php";
        };
};


Original Source: https://j11y.io/javascript/detect-ie-in-js-using-conditional-comments/

Also, is it possible to change the variable names to ones, both, more relevant, and unique, to prevent coding conflicts?

@Przemek, Will these changes work?

/*

----------------------------------------------------------
A short snippet for detecting versions of IE in JavaScript
without resorting to user-agent sniffing
----------------------------------------------------------

If you're not in IE (or IE version is less than 5) then:

ieVersion === undefined

If you're in IE (&gt;=5) then you can determine which version:

ieVersion === 7; // IE7

Thus, to detect IE:

if (ieVersion) {}

And to detect the version:

ieVersion === 6 // IE6
ieVersion &gt; 7 // IE8, IE9 ...
ieVersion &lt; 9 // Anything less than IE9

----------------------------------------------------------

*/

/* IE Detection Snippet. DO NOT EDIT [BELOW] THIS LINE. [BEGIN] */

var ieVersion = (function() 
    {
        var elmt = document.createElement('span');
        var version = 3;

        do 
            {
                elmt.innerHTML = '&lt;!--[if gt IE ' + (++version) + ']&gt;&lt;span&gt;&lt;/span&gt;&lt;![endif]--&gt;';
            }
        while (elmt.getElementsByTagName('span')[0] &amp;&amp; version &lt;= 9);

        return version &gt; 4 ? version : false;
    }());

/* IE Detection Snippet. DO NOT EDIT [ABOVE] THIS LINE. [END] */


if ((ieVersion) &amp;&amp; (ieVersion &lt; 9))
    {
        alert( "You are running an older version of Microsoft Internet Explorer:\r\nVersion " + ieVersion.toFixed(1) + ", which is NOT supported.\r\n\r\nPlease upgrade your web browser to its latest version, or if you're still using Windows XP, to Google Chrome, Mozilla Firefox, Apple Safari, or Opera, to view this website, properly.\r\n\r\nClick \"OK\" to read instructions on how to download and install a newer, more compatible, web browser.");
        window.parent.location = "/libs/old_browser_detect/current/upgrade_browser.php";
    };
Remarks

It sure is an interesting, hackery approach. Taken into account that this code must be compatible with archaic browsers, I would say it's rather fine. Few remarks:


For readability while() with no body could be rewritten to do {...} while().
Fail safe v &lt;= 9 to avoid potential infinite loop could be added, in case something would change regarding browsers' behavior.
Naming could be better: div could become element to abstract used tag from the purpose of this variable's existence, v could become less-cryptic version.
Variable undef is unnecessary, it's only use occurrence can be replaced with false.
Formatting issues.
Inconsistent indentation, bracket policy and quotation marks.
Unnecessary addition of level of indentation; below ifs can be combined:

if (ie) 
{
    if (ie &lt; 9)
        {

If you would use single quotation marks in your alert(), you would have to perform only one escaping, instead of two.
window.parent should be replaced with window.top since parent could be iframe as well.


Rewrite

(untested for positive cases)


var ieVersion = (function() {
  var element = document.createElement('span');
  var version = 3;

  do {
    element.innerHTML = '&lt;!--[if gt IE ' + (++version) + ']&gt;&lt;span&gt;&lt;/span&gt;&lt;![endif]--&gt;';
  }
  while (element.getElementsByTagName('span')[0] &amp;&amp; version &lt;= 9);

  return version &gt; 4 ? version : false;
}());

if (ieVersion &amp;&amp; ieVersion &lt; 9) {
  alert('You are running an older version of Microsoft Internet Explorer:\r\nVersion ' + ie.toFixed(1) + ', which is NOT supported.\r\n\r\nPlease upgrade your web browser to its latest version, or if you\'re still using Windows XP, to Google Chrome, Mozilla Firefox, Apple Safari, or Opera, to view this website, properly.\r\n\r\nClick "OK" to read instructions on how to download and install a newer, more compatible, web browser.');
  window.top.location.href = '/libs/old_browser_detect/current/upgrade_browser.php';
}




Different approaches

Feature-detection

I think it would be best to achieve your goal by using regular feature-detection based method:



var ieVersion = (function getLegacyIEVersion() {
  if (!document.compatMode) { return 5; }
  if (!window.XMLHttpRequest) { return 6; }
  if (!document.querySelector) { return 7; }
  if (!document.addEventListener) { return 8; }
  //if (!window.atob) { return 9; }
  return false;
})();

var IEThreshold = 9;
if (ieVersion !== false &amp;&amp; ieVersion &lt; IEThreshold) {
  console.log('Legacy IE');
}
else {
  console.log('Not a legacy IE');
}
/* Demo console styling */
.as-console-wrapper { top: 0; }




Conditional compilation

Another way of achieving the same, would be to use conditional compilation to detect JS engine version. Change ieVersion() function from previous code to:

var ieVersion = /*@cc_on (function() {
  switch(@_jscript_version) {
    case 1.0: return 3; break;
    case 3.0: return 4; break;
    case 5.0:
    case 5.1: return 5; break;
    case 5.5: return 5.5; break;
    case 5.6: return 6; break;
    case 5.7: return 7; break;
    case 5.8: return 8; break;
    case 9: return 9; break;
    case 10: return 10; break;
  }
})() || @*/ false;


Note however, that this method uses @_jscript_version which returns version of JS engine of the browser itself, while in cases of running in compatibility mode it would be desirable to get an actually used engine version, instead. Also, minifiers would get rid of this code, since for browsers other than IE &lt; 11 this is just a comment.