Multiple solutions for dynamically loading JS files in JavaScript

A comparison of all the dynamic plus methods

The code is as follows

Copy Code

/* Dynamically loading JS v1.0 by:dum 2012-03-17 www.111cn.net Usage: src= "webjsbase.js?load=a,b" Note: Load this directory under JS */ var webjsbase = { Require:function (LibraryName) { document.write (' <script type= "text/javascript" src= "' +libraryname+ '" ></script> '); }, Load:function (defaultload) { if ((typeof prototype== ' undefined ') | | (typeof Element = = ' undefined ') | | (typeof element.methods== ' undefined ')) Throw (' Prototype lib loading failed! '); if (typeof defaultload== ' undefined ') defaultload= '; var js =/webjsbase.js (?. *)?$/; $$ (' head script[src] '). FindAll (function (s) { Return S.src.match (JS); }). Each (function (s) { var path = s.src.replace (js, ""); var includes = S.src.match (/?. *load= ([a-za-z0-9_,]*)/); (includes includes[1]: defaultload). Split (', '). each (include) { Webjsbase.require (path + include + '. js '); }); }); } };

Webjsbase.load (); Here the parameter can specify the JS file to be loaded by default

This is the simplest way to use the direct document.write as shown below after loading.

The code is as follows	Copy Code
<script language= "JavaScript" > document.write ("<script src= ' test.js ' ></script>"); </script>

Add an ID to the script to dynamically change the SRC attribute of the existing script

The code is as follows	Copy Code
<script src= ' id= "S1" ></script> <script language= "JavaScript" > S1.src= "Test.js" </script>

This creates the script element dynamically using getElementsByTagName (' head ')

The code is as follows	Copy Code
<script> var ohead = document.getElementsByTagName (' head '). Item (0); var oscript= document.createelement ("script"); Oscript.type = "Text/javascript"; Oscript.src= "Test.js"; Ohead.appendchild (Oscript); </script>

You can also try this by customizing a function

The code is as follows	Copy Code
function include (SRC) { Htmlcode = ' <script language= ' javascript ' src= ' + src + ' ></script> '; document.write (Htmlcode); }

Call the method so it looks like you have PHP's include function

The code is as follows	Copy Code
Include (BaseDir + "/prototype.js"); Include (BaseDir + "/map.js"); Include (BaseDir + "/mapevent.js"); Include (BaseDir + "/model/mapmodel.js"); Include (BaseDir + "/model/maptype.js"); Include (BaseDir + "/model/tile.js");

There are friends that can use EXTJS4 dynamic loading JS Here I do not introduce, the above method enough for you to achieve dynamic loading JS.

So in the use of this type of dynamic loading JS, the main interface of the JS script is continued to execute, so may appear through the asynchronous loading of JS code can not be expected effect of the situation.

This time you can consider the use of Ajax load JS method.