title: conditionally loading external javascript libraries in my plugin
body: <p>I have written a plugin that depends on external libraries that I want to include conditionally, that is, the user can choose to not have them be included automatically in case the user's web site already has those libraries. Here is some pseudocode to illustrate the issue</p>
  
  <pre><code>&lt;script type="text/javascript" src="path/to/plugin.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  PLUGIN.init({
      "param1": "foo",
      "parma2": 33, 
      "include": {"jquery": 0, "googlemaps": 0}
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>In my plugin script</p>
  
  <pre><code>var PLUGIN = {
      "init": function(obj) {
          if (obj.include.googlemaps !== 0) {
              document.write('&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;v=3.6"&gt;\x3C/script&gt;');
          }
  
          if (obj.include.jquery !== 0) {
              document.write('&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;\x3C/script&gt;');
          }
  
          .. do more things ..
  }
  </code></pre>
  
  <p>The problem is that when I am ready to "do more things," the libraries don't seem to be loaded yet. I get an error that jquery not found, or google maps not found. I can solve this by changing my code to</p>
  
  <pre><code>document.write('&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;v=3.6"&gt;\x3C/script&gt;');
  document.write('&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;\x3C/script&gt;');
  
  var PLUGIN = {
      "init": function(obj) {         
          .. do more things ..
  }
  </code></pre>
  
  <p>but now the user can't control loading the libraries or not loading them. Suggestions? Workarounds?</p>
  
  <p><strong>Update:</strong> Thanks for the suggestions, you all, but no joy so far. Here is what I am doing, and what is happening. Since I am potentially loading 0 or more scripts (the user can optionally decide which scripts need not be loaded), I have made my code like so</p>
  
  <pre><code>"importLib": function(libPath, callback) {
      var newLib = document.createElement("script");
  
      if (callback !== null) {
          newLib.onload = callback;
      }
      newLib.src = libPath;
  
      document.head.appendChild(newLib);
  },
  
  "init": function(obj) {
      var scripts = [];
      if (obj.include.googlemaps !== 0) {
          scripts.push("http://maps.google.com/maps/api/js?sensor=true&amp;v=3.6");
      }
  
      if (obj.include.jquery !== 0) {
          scripts.push("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js");
      }
  
      if (obj.include.anotherlib !== 0) {
          scripts.push("http://path/to/another/lib.js");
      }
  
      var len_scripts = scripts.length,
          callback = null;
  
      if (len_scripts &gt; 0) {
          for (var i = 0; i &lt; len_scripts; i++) {
  
              // add callback only on the last lib to be loaded
              if (i == len_scripts - 1) {
                  callback = function() { startApp(obj) };
              }
  
              importLib(scripts[i], callback);
          }
      }
  
      // Start the app rightaway if no scripts need to be loaded
      else {
          startApp(obj);
      }
  },
  
  "startApp": function(obj) {
  }
  </code></pre>
  
  <p>What happens is that Firefox croaks with a <code>attempt to run compile-and-go script on a cleared scope</code> error, and Safari doesn't get that error, but doesn't load anything. Funnily, Safari error console shows no error at all. Seems like the Firefox error is caused by the line <code>document.head.appendChild(newLib);</code> which, if I comment, the error goes away, but of course, the web page doesn't load correctly.</p>