Checking for Netscape and Microsoft browser versions.


Why Check? Version-checking code Taking Action Filtering out non-JavaScript Browsers

You can copy the code samples from this page to your source files by highlighting them with the mouse, choosing Edit..Copy (or Ctrl-C), then switching to your HTML editor and pasting them in. However FrontPage 2000 users should paste code into an empty Windows Notepad document first, then re-copy it from there before pasting it into FrontPage's HTML source view. This is because FrontPage treats text copied from the browser screen as 'rich', and converts it to HTML display format (e.g. with &lt; instead of <)


Why check?

Whether your Dynamic HTML code is IE-only, Netscape-only or cross-browser compatible, you've still got to make sure that incompatible browsers don't try to execute it. The easiest way is to check for the browser name and version via a script in the document's <HEAD> section, then take appropriate action (such as loading a different page) if you find your page running in the 'wrong' browser.

This should be easy, as both Navigator and IE expose system properties with promising-sounding names like window.navigator.appName and window.navigator.appVersion. However it's not quite that simple (surprise, surprise!), because the appVersion  property has a different layout for each browser, and Microsoft, for reasons best known to itself, chooses to make IE5's version string begin '4.0'!

Here are the values returned by Navigator 4.61 on my PC:

window.navigator.appName:    Netscape
window.navigator.appVersion: 4.6 [en] (Win98; I)

Here are the values returned by Internet Explorer 5.0 on my PC:

window.navigator.appName:    Microsoft Internet Explorer
window.navigator.appVersion: 4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98; DigExt)

And here are the values returned by your browser:



Version-checking routines

The bottom line is that you have to have separate version checking routines for Navigator and IE, since the IE one has to find the 'MSIE' bit in order to retrieve the real version number. However that's not too big a problem - here's the code:

<SCRIPT LANGUAGE="JavaScript">

var RunningIE4
RunningIE4 = (msieversion() >=4);

function msieversion() {
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // is Microsoft Internet Explorer; return version number
return parseInt ( ua.substring ( msie+5, ua.indexOf ( ".", msie ) ) )
else
return 0 // is other browser
}

var RunningNav4 = (Netscapeversion() >= 4)
function Netscapeversion() {
if (window.navigator.appName != "Netscape") {
return 0
} else {
return parseInt(window.navigator.appVersion.substring(0, 1))
}
}

var DHTMLbrowser = (RunningIE4 | RunningNav4) 

</script>

Placing this script in the <HEAD> section of your page will produce three true/false variables - RunningIE4, RunningNav4 and DHTMLbrowser - which you use to protect browser-specific code.  DHTMLbrowser is true if either of the others are, so can be used  with cross-browser compatible code.

Here are the values of these variables for your browser:

This version of the script checks for version 4 or later of both browsers, but you can make it check for IE5 by changing it like this:

var RunningIE5
RunningIE5 = (msieversion() >=5);
var DHTMLbrowser = (RunningIE5 | RunningNav4) 


Taking Action

So now you know whether this browser is compatible with your page, what do you do if it isn't? Here's a simple routine which you can place after the version-checking script in the <HEAD> section of your page (this example assumes that your page will run in Navigator or IE, so checks DHTMLbrowser):

<SCRIPT>
if (! DHTMLbrowser) {
  alert("Sorry, this page will only work in Navigator 4.0, IE 4.0 or later")
  history.go(-1)
}
</SCRIPT>

This will bounce the browser straight back to the page it's just come from. Alternatively, if you want to redirect the browser to a different page, you can just say:

<SCRIPT>
if (! DHTMLbrowser) {
  location.href="noDHTML.htm"
}
</SCRIPT>


Filtering out non-JavaScript browsers

The technique above will, of course, only work in browsers which support JavaScript and have it switched on. To protect against non-JavaScript browsers (there are still some out there!), you need to link to a script-checking  page from your menu. This page uses a script to  pass the browser onto the 'real' page - if the script isn't executed, then the browser falls though to ordinary HTML content, which displays an error message.

Here's the source for a complete script-checking file:

<HTML><HEAD>
<SCRIPT>
location.href="realpage.htm"
</SCRIPT>
</HEAD><BODY>
<H1>Sorry, the page you want only runs in JavaScript-enabled browsers</H1>
Press your browser's 'Back' button to return to the previous page.
</BODY></HTML>

If this document was called 'jscheck.htm', then a link from a menu page might go like this:

<A HREF="jscheck.htm">Open realpage.htm</A>

This version of the file is hard-coded to open a particular page ('realpage.htm'). However the version below will open any page, depending on the parameter it's given:

<HTML><HEAD>
<SCRIPT>
location.href= location.search.substr(1, location.search.length - 1)
</SCRIPT>
</HEAD><BODY>
<H1>Sorry, the page you want only runs in JavaScript-enabled browsers</H1>
Press your browser's 'Back' button to return to the previous page.
</BODY></HTML>

 When you link to this file, you add the name of the 'real' target page as a parameter, like this:

<A HREF="jscheck.htm?mypage.htm">Open realpage.htm</A>

This example See Web Workshop in PC Plus issue 156 for more details of passing parameters between documents.


Back to menu.