20.3 Compatibility with Non-JavaScript Browsers

The previous section discussed compatibility with browsers that do not support a particular version of JavaScript. This section considers compatibility with browsers that do not support JavaScript at all. These are either browsers that have no JavaScript capability or browsers in which the user has disabled JavaScript (which some users do because of security concerns). Because a number of such browsers are still in use, you should design your web pages to fail gracefully when read into browsers that do not understand JavaScript. There are two parts to doing this: first, you must take care to ensure that your JavaScript code does not appear as if it were HTML text; and second, you should arrange to display a message informing the visitor that her browser cannot correctly handle the page.

20.3.1 Hiding Scripts from Old Browsers

Web browsers that support JavaScript execute the JavaScript statements that appear between the <script> and </script> tags. Browsers that don't support JavaScript but recognize the <script> tag simply ignore everything between <script> and </script>. This is as it should be. Really old browsers, however (and there are still some out there), do not even recognize the <script> and </script> tags. This means that they ignore the tags themselves and treat all the JavaScript between them as HTML text to be displayed. Unless you take steps to prevent it, users of these old browsers see your JavaScript code formatted into big meaningless paragraphs and presented as web page content!

To prevent this, enclose the body of your script within an HTML comment, using the format shown in Example 20-4.

Example 20-4. A script hidden from old browsers

<script language="JavaScript">
<!-- Begin HTML comment that hides the script
        // JavaScript statements go here
        //              .
        //              .
// End HTML comment that hides the script -->
</script>

Browsers that do not understand the <script> and </script> tags simply ignore them. Thus, lines one and seven in Example 20-4 have no effect on these browsers. They'll ignore lines two through six as well, because the first four characters on line two begin an HTML comment and the last three characters on line six end that comment -- everything in between is ignored by the HTML parser.

This script-hiding technique also works for browsers that do support JavaScript. Lines one and seven indicate the beginning and end of a script. Client-side JavaScript interpreters recognize the HTML comment-opening string <!-- but treat it as a single-line comment. Thus, a browser with JavaScript support treats line two as a single-line comment. Similarly, line six begins with the // single-line comment string, so that line is ignored by JavaScript-enabled browsers as well. This leaves lines three through five, which are executed as JavaScript statements.

While it takes a little getting used to, this simple and elegant mix of HTML and JavaScript comments does exactly what we need: it prevents JavaScript code from being displayed by browsers that do not support JavaScript. Although a declining number of browsers require this type of commenting, it is still quite common to see it used in JavaScript code on the Internet. The comments need not be as verbose as in Example 20-4, of course. It is common to see scripts like this:

<script language="JavaScript">
<!--
  document.write(new Date(  ));
// -->
</script>

This commenting technique has solved the problem of hiding our JavaScript code from browsers that can't run it. The next step in failing gracefully is to display a message to the user to let him know that the page cannot run.

20.3.2 <noscript>

The <noscript> and </noscript> tags enclose an arbitrary block of HTML text that should be displayed by any browser that does not support JavaScript. These tags can be employed to let a user know that his browser cannot correctly display your pages that require JavaScript. For example:

<script language="JavaScript1.1">
  // Your JavaScript code here
</script>
<noscript>
<hr size="4">
<h1>This Page Requires JavaScript 1.1</h1>
This page requires a browser that supports JavaScript 1.1.<p>
Your browser either does not support JavaScript, or it has JavaScript
support disabled. If you want to correctly view this page, please
upgrade your browser or enable JavaScript support.
<hr size="4">
</noscript>

There is one problem with the <noscript> tag. It was introduced into HTML by Netscape with the release of Netscape 3. Thus, it is not supported in Netscape 2. Since Netscape 2 does not support <noscript> and </noscript>, it ignores the tags and displays the text that appears between them, even though it does support scripting. In the previous code, however, this works out to our advantage, because we've specified that the code requires JavaScript 1.1 support.