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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Importing JavaScript files within a function

    Is it possible to import JavaScript files dynamically from within a JavaScript function?

    I know this can be done in HTML using <script src="something.js"></script>.

    I need to dynamically have access to a function in a file but only when a certain JS method in a certain class needs it. I don't want to have to include it everytime in the HTML code when it is used to rarely (mainly for debugging).

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    there are several ways to add a script dynamically, but you must keep in mind that you will not get "instant" access to it. it needs to be loaded into memory of the browser and properly parsed by script engine, before made available, and this type of "late-binding" could interupt your variables, blah...

    you can also, append a script and add event listener to let you know when that particular script is loaded to the page. (a prefered method)

  • #3
    TNO
    TNO is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    213
    Thanks
    2
    Thanked 1 Time in 1 Post
    This is a pretty ugly idea, but it may work:

    create an IFRAME element on your page like this:

    Code:
    <IFRAME ID="Script" NAME="Script" src="about:blank" style="display:none"></IFRAME>
    now, when you have your function and you want to access an outside .js dynamically, do this:

    function getJS(){
    document.all.Script.src="MyCode.js";
    document.all.Script.Function/Var/Object/etc. = Bleh;
    }

    Like I said, Not a pretty idea, and there are most likely better ones, but I know this works. (unless its a separate domain).

  • #4
    New to the CF scene
    Join Date
    Sep 2005
    Location
    Kassel, Hessen, Germany
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I think there is a simpler solution

    Use this:

    /// <summary>
    /// imports a script into the document
    /// <summary>
    /// <remarks>
    /// script reference is appended to the calling script tag
    /// <remarks>
    function Import(scriptLocation)
    {
    document.write('<script type="text/javascript" src="' + scriptLocation + '"><\/script>');
    }


    This works, because the <script> tag is appended to the calling script tag. So that the browser can parse it after it finished parsing the calling script tag.

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'll try that and see if I can get it to work.

    Thanks for the help!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Code:
    var script = document.createElement("script")
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "path/to/file.js");
    document.getElementsByTagName("head")[0].appendChild(script);


  •  

    Posting Permissions

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