Browser objects, part three

Notes from May 13, 2005 and May 16, 2005 classes

<noscript>...</noscript>

The contents of the <noscript>...</noscript> html container tag only shows up if the user's browser doesn't support JavaScript

<noscript>
<p>This Website requires JavaScript to be enabled. <a href="turnonjscript.html">Read these instructions</a> to learn how to turn on JavaScript in your browser.</p>
</noscript>

Browser sniffing

You can use JavaScript to see if a browser supports a JavaScript object and property.

<script language="JavaScript" type="text/javascript">

<!--
// document.all works in MSIE and Opera but not Mozilla/Netscape

if (document.all)
{
document.write("Your browser supports document.all.");
}
else
{
document.write("Your browser does not support document.all.");
}
// -->
</script>

Use these document.write statements to see how browsers communicate navigator object information to JavaScript:

<script language="JavaScript" type="text/javascript">

<!--

document.write(navigator.appName+"<br />");
document.write(navigator.userAgent+"<br />");
document.write(navigator.appVersion);

//-->
</script>

Using the navigator object to check for different browsers

<html>
<head>
<title>Browser sniffing</title>

<script language="JavaScript" type="text/javascript">

<!--

// check for the browser's name
function getBrowserName()
{
var lsBrowser = navigator.appName;
/* the strong returned by navigator.appName is long and varies a lot. Watch how we deal with that in the next line. */
if (lsBrowser.indexOf("Microsoft") >=0)
/* searches the lsBrowser string for the existence of the keyword "Microsoft". */
{
lsBrowser = "MSIE";
}

else if (lsBrowser.indexOf("Netscape") >= 0)
// checks the lsBrowser string for the existance of the word "Netscape"
{
lsBrowser = "NETSCAPE";
}
else
{
lsBrowser = "UNKNOWN";
// or you could add more code to check for more browsers
}
return lsBrowser;
// return the value of lsBrowser to the calling code
}

// check to see what operating system the user has
function getOS()
{

var userPlat = "unknown";
var navInfo = navigator.userAgent;
// check for all sorts of flavors of MS Windows
if ((navInfo.indexOf("windows NT") != -1)
|| (navInfo.indexOf("windows 95") != -1)
|| (navInfo.indexOf("windows 98") != -1)
|| (navInfo.indexOf("WinNT") != -1)
|| (navInfo.indexOf("Win95") != -1)
|| (navInfo.indexOf("win98") != -1))
{
userPlat = "Win32";
}

else if(navInfo.indexOf("Win16") != -1)
{
userPlat = "Win16";
}
else if(navInfo.indexOf("Macintosh") != -1)
{
userPlat = "PPC";
}

else if(navInfo.indexOf("68K") != -1)
{
userPlat = "68K";
}
return userPlat;
}

function getBrowserVersion()
/* this gets tricky. With Netscape, the browser version is the first character of the Navigator object's appVersion property, but MS Internet Explorer doesn't distinguish between versions 4, 5, and 6.
{
var findIndex;
var browserVersion = 0;
// first we find out the browser name, using the function we just wrote above
var browser = getBrowserName();
if (browser == "MSIE")
{
browserVersion = navigator.userAgent;
findIndex = browserVersion.indexOf(browser) + 5;
/* set this to the character position of MSIE plus five. MSIE is 4 characters long, so the 5th character in that string is going to be the browser version */

browserVersion = parseInt(browserVersion.substring(findIndex,findIndex + 1));
/* browserVersion is set to the integer value of the number we just found, which we grab by using the substring method. This selects the character starting at findIndex, our number, and whose end is one before findIndex+1--thus ensuring we just select one character. */
}
else
{
browserVersion = parseInt(navigator.appVersion.substring(0,1));
// sure is easier with Netscape, isn't it?
}
return browserVersion;
// return this info to the calling code
}

//-->

</script>

<body>

<h1>Browser sniffing</h1>

<script language="JavaScript" type="text/javascript">
<!--
var userOS = getOS();
var browserName = getBrowserName();
var browserVersion = getBrowserVersion();
if (browserVersion < 4 || browserName == "UNKNOWN" || userOS == "Win16")
{
document.write("<h2>Sorry, this browser version is not supported.</h2>");
}
else if (browserName == "NETSCAPE")
{
location.replace("NetscapePage.html");
}
else
{
location.replace("MSIEPage.html");
}
// -->
</script>

</body>

</html>