spacer
Yehuda Shiran March 4, 2001
Advance Loading of External Scripts
Tips: March 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

Loading external scripts via document.write can become quite tricky at times. In Column 78, Netscape 6, Part VII: Object-Oriented DOCJSLIB 3.1, we load the browser-specific DOCJSLIB 3.1 object on the fly. The first few lines of the application looks like this:

<SCRIPT LANGUAGE="JavaScript" SRC="browserSniffer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="docjslibSuperClass.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="createTheProperSubClass.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var classSelectionObj = new createTheProperSubClass();
var myBrowserAPIObj = classSelectionObj.getTheProperSubClass();
// -->
</SCRIPT>
The browser-specific objects are loaded on the fly in createTheProperSubClass.js:

var browserType = new browserSniffer();
if (browserType.ie4) {document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibIE4SubClass.js"><\/SCRIPT>');}
else if (browserType.ie5) {document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibIE5SubClass.js"><\/SCRIPT>');}
else if (browserType.ns4) {document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibNS4SubClass.js"><\/SCRIPT>');}
else if (browserType.ns6) {document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibNS6SubClass.js"><\/SCRIPT>');}
But originally, we wanted to load these browser-specific objects inside the function createTheProperSubClass() in the following way:

function createTheProperSubClass() {
  var browserType = new browserSniffer();
  if (browserType.ie4) {
    document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibIE4SubClass.js"><\/SCRIPT>');
    this.className = "docjslibIE4SubClass";
  }
  else if (browserType.ie5) {
    document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibIE5SubClass.js"><\/SCRIPT>');
    this.className = "docjslibIE5SubClass";
  }
  else if (browserType.ns4) {
    document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibNS4SubClass.js"><\/SCRIPT>');
    this.className = "docjslibNS4SubClass";
  }
  else if (browserType.ns6) {
    document.write('<SCRIPT LANGUAGE="JavaScript" SRC="docjslibNS6SubClass.js"><\/SCRIPT>');
    this.className = "docjslibNS6SubClass";
  }
  
  this.getTheProperSubClass = getTheProperSubClassMethod;
  
  function getTheProperSubClassMethod() {
    // example: return new docjslibIE5SubClass();
	return eval('new ' + this.className + '()');
  }
}
We found out that this code does not load the objects and the browser complains. One of the reasons may be that when the loading is done within the function above, it is actually done too close to its first usage. JavaScript does not wait for external scripts to load -- it continues on with the main script. When loading the objects the way we did succeed, the browser-dependent object is being loaded way in advance of its first usage.


People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger