Making Peace: Legacy Browsers and External Scripts

There are several benefits to using external JavaScript files, and among them are more-compact HTML pages and the caching and sharing of script files among multiple web pages. Most legacy browsers, meaning those that support only JavaScript version 1 (such as Netscape 2 and Internet Explorer 3), however, do not support external script files. When a web page tries to call a function or access a variable that is stored in an external script file, first-generation JavaScript-enabled browsers will throw a fit of errors.

Rather than dismiss this pitfall as part of the price of using a legacy browser, there are steps that developers can take to prevent errors in older browsers while preserving the benefits of external script files for everyone else. Here are two of them:

Method 1

In this first example, the code for legacy browsers is contained between the opening and closing <script> tags that also reference the external script file through the src attribute:

Example:

<script type="text/javascript" src="scripts/js_ExternalJavascriptSupport.js">
  <--
    function fnMouseOver1() {}
    function fnMouseOut1() {}
    function fnMouseClick1() {
      alert("Your browser does not support external script files.\nSorry!") ;
    }
  // -->
</script>

function fnMouseOver1() {
  if (document.images) {
    document.images["Smiley1"].src = "images/SmileyOver.gif" ;
  }
}

function fnMouseOut1() {
  if (document.images) {
    document.images["Smiley1"].src = "images/Smiley.gif" ;
  }
}

function fnMouseClick1() {
  alert("Your browser does support external script files.\nAwesome!") ;
}

• Mouse over the image above. If you are using a legacy browser you should see no change in the image -- but you will also not receive a scripting error. If you are using a newer browser that understands external script files, the mouseover image will change (assuming that your browser also supports the images collection).
• Click on the image above. You will receive an alert that confirms whether or not your browser understands external script files. Browsers that do should execute the function in the external file, while browsers that don't should execute the function contained within the embedded script element.

• With minimal code, this method prevents errors in legacy browsers that do not understand external script files.
• It takes advantage of the designed intent of the <script> element: browsers that understand the src attribute should ignore any content contained between the opening and closing <script> tags, while browsers that don't understand it will execute that code while ignoring the external file.
• It works with functions and variables.

• A very small number of known browsers -- all of which are extremely minor makes and models -- are capable of handling external script files while also executing code contained within <script> elements that include a src attribute. This number is far smaller than the number of legacy browsers that will handle this method correctly, but it is still a consideration, however small.

Method 2

The second method was developed by Evolt's Jeff Howden, and offers a benefit or two that the previous method does not. This method involves the use of two <script> elements: one that lacks a src attribute to accommodate legacy browsers, and one that includes a src attribute to handle newer browsers. The secret of this method is that if there are two versions of a function, the second version takes precedence (much like style declaration precedence for those familiar with CSS). So, by declaring the legacy version of the function first, and then the more-robust version of the function in an external script file, newer browsers that understand external script files will execute the second version, while legacy browsers that don't understand them will execute the first.

Example:

<script type="text/javascript">
  <--
    function fnMouseOver2() {}
    function fnMouseOut2() {}
    function fnMouseClick2() {
      alert("Your browser does not support external script files.\nSorry!") ;
    }
  // -->
</script>
<script type="text/javascript" src="scripts/js_ExternalJavascriptSupport.js"></script>

function fnMouseOver2() {
  if (document.images) {
    document.images["Smiley2"].src = "images/SmileyOver.gif" ;
  }
}

function fnMouseOut2() {
  if (document.images) {
    document.images["Smiley2"].src = "images/Smiley.gif" ;
  }
}

function fnMouseClick2() {
  alert("Your browser does support external script files.\nAwesome!") ;
}

• Mouse over the image above. As with the first example, if you are using a legacy browser you should see no change in the image -- but you also should not receive a scripting error. If you are using a newer browser that understands external script files, the mouseover image will change (assuming that your browser also supports the images collection) because your browser supersedes the first function with the second.
• Click on the image above. You will receive an alert that confirms whether or not your browser understands external script files. Browsers that do should execute the function in the external file, while browsers that don't should execute the function contained within the embedded script element.

• With only slightly more code than required by the first example,this method prevents errors in legacy browsers that do not understand external script files.
• When the browser is unable to locate the external script file, this method has a beneficial side-effect that prevents script errors even in newer browsers. Because the newer browsers recognize the first <script> element, they will use it in those rare cases when the content of the second <script> element is unavailable to replace that of the first. This is a very powerful benefit.

• None currently known.

Whichever method you choose to use is up to you. Also, if you discover quirks or breakdowns in either of these approaches, please either post the details below or email me at jaylard@members.evolt.org. Happy coding!