created: June 18, 1997 - modified: June 18, 2008

Problem addressed

Hiding JavaScript from older browsers to prevent browser errors, and browser crashes using Google Analytics JavaScript as an example.

Solution

There are several possible approaches, but the only one I trust is object/function detection combined with try and catch:

  1. use if(functionName) to determine if the browser supports the function. Please not that function names are case sensitive (e.g. getElementByID is not the same as getElementById)
  2. unfortunately Netscape 4.x will return true even if the function doesn't exist, so you need to explictily check to see if the browser is Netscape 4.x using if(document.layer). Luckily Netscape 4.x is the only browser that supports this function.
  3. use a try {} catch {} statement to determine if a built in constant (e.g. undefined) is supported.
  4. unfortunately not all browsers support try / catch, but any browser that supports getElementById() does, so you can use if(getElmenentById) as your check before your try and catch statement.
  5. unfortunately IE 4.x doesn't support try / catch and parses all JavaScript event if it doesn't execute it (IE 4.x doesn't support getElementById), so it will throw an error when it reaches the try / catch statements, so you need to hide the try / catch statements from IE 4.x inside the eval() function

The following example shows how I put the above techniques in place to hide Google Analytics JavaScript from older browsers (crashed Netscape 4.x, threw an error for IE 4.x and 5.x):

01 <script type="text/javascript">
02 //<![CDATA[
03	var b_undefined_keyword_supported = false;
04  if(document.getElementById&&!document.layer) {
05   b_undefined_keyword_supported = true;
06   eval("try { var b_test = undefined; } 
	catch (err) 
	{ b_undefined_keyword_supported = false;}");
07  }
08  // google scripts
09  if(b_undefined_keyword_supported) {
10   var gaJsHost = (("https:" == 
	document.location.protocol) ? "https://ssl." 
	: "http://www.");
11   document.write(unescape("%3Cscript src='" 
	+ gaJsHost + "google-analytics.com/ga.js' 
	type='text/javascript'%3E%3C/script%3E"));
12  }
13 //]]>
14 </script>
15 <script type="text/javascript">
16 //<![CDATA[
17  if(b_undefined_keyword_supported) {
18   var pageTracker = _gat._getTracker("UA-4725824-1");
19   pageTracker._initData();
20   pageTracker._trackPageview();
21  }
22 //]]>
23 </script>
  • 02: CData - see using XHTML with older browsers for details
  • 03: the main problem is googles use of the keyword undefined that isn't supported by older browsers
  • 04: use the document.getElementById check to see if the browser supports the try / catch statement, combined with the !document.layer check to make sure the current browser isn't Netscape 4.x
  • 05: the majority of browsers that support getElementById also support the undefined keyword with the known exception of IE 5.x
  • 06: use the try / catch statement hidden inside of an eval function to see if the browser supports the keyword
  • 07: if the keyword is supported load the script
  • 09: if the keyword is supported run the script

Background

As part of redeveloping my site I decided to install Google Analytics to gather addtional information about the users accessing my site.

Based on my analysis of the browsers still used on the net I decided to test my site under Netscape 4.x+ and IE 4.x+, and found that the Google scripts crashed Netscape 4.x and caused JavaScript errors in IE 4.x and IE 5.x, so I dug up my old page on using object detection in JavaScript, and updated it to the current page.