Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is it possible to load additional javascript with javascript?

    Ok, so here is what I want to do, but I don't know if it can be done.

    I want to have a big library of javascript that will modify DOM objects based on their ID, but because this will be a big library, I want to only send to the user what is needed to modify their page.

    So this is what I was thinking. With some mechanism decide which javascript files need to be retrieved from the server and by using some ajax type http request get the files and then make the browser load them. This way only one base javascript file that does the downloading and the library files necessary are transferred.

    So my question is, can javascript download additional javascript and load it?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    var JSAdd;
    var CSSAdd;
    
    function AddJS(name){
     if (getFile(name)==null){ return; }
     head=document.getElementsByTagName('HEAD')[0];
     // next line removes the previously added External JavaScript
     if (JSAdd){ head.removeChild(JSAdd); }
     JSAdd=document.createElement('SCRIPT');
     JSAdd.type='text/javascript';
     JSAdd.src=name;
     head.appendChild(JSAdd);
    }
    
    function AddCSS(name){
     if (getFile(name)==null){ return; }
     head=document.getElementsByTagName('HEAD')[0];
     // next line removes the previously added StyleSheet
     if (CSSAdd){ head.removeChild(CSSAdd); }
     CSSAdd=document.createElement('LINK');
     CSSAdd.rel='stylesheet';
     CSSAdd.type='text/css';
     CSSAdd.href=name;
     head.appendChild(CSSAdd);
    }
    
    function getFile(filename){
     oxmlhttp = null;
     try {
      oxmlhttp = new XMLHttpRequest();
      oxmlhttp.overrideMimeType("text/xml");
     }
     catch(e){
      try { oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
      catch(e){ return null; }
     }
     if(!oxmlhttp) return null;
     try {
      oxmlhttp.open("GET",filename,false);
      oxmlhttp.send(null);
     }
     catch(e){ return null; }
     return oxmlhttp.responseText;
    }
    
    
    function Test(){
     alert('An External JavaScript\nhas not been Added');
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <input type="button" name="" value="Add JS fred.js"  onclick="AddJS('fred.js');" /><br />
    <input type="button" name="" value="Add JS tom.js"  onclick="AddJS('tom.js');" /><br />
    <input type="button" name="" value="Test"  onclick="Test();" />
    <br />
    <br />
    <input type="button" name="" value="Add CSS ss1.css"  onclick="AddCSS('ss1.css');" /><br />
    <input type="button" name="" value="Add CSS ss2.css"  onclick="AddCSS('ss2.css');" /><br />
    <span class="color" >Some Test Text</span>
    </body>
    
    </html>

  • #3
    Regular Coder
    Join Date
    Mar 2004
    Posts
    130
    Thanks
    0
    Thanked 0 Times in 0 Posts
    check out dojotoolkit.org to see how they did it. Top class javascript programmers, they are.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •