Unload external .js file

Question

I'm loading some HTML and JS with AJAX:

main-page.html loads vía AJAX a page called page-to-load.html.

<!-- main-page.html -->
<html>
...
<script>
$.ajax({ 
  type:"POST", 
  url:"page-to-load.html", 
  success:function(data) { 
    $("#some_id").html(data);
  }
});
</script>
...
</html>

page-to-load.html includes html and a js file:

<!-- page-to-load.html --->
<script src="scripts-for-this-html.js"></script>
<p>This is a HTML page working with above external .js file</p>

As you can see, i'm loading a js file, scripts-for-this-html.js

This works perfectly. The problem is that if I loaded again (I mean, "#some_id" gets empty and loaded with page-to-load.html again) all the script (scripts-for-this-html.js) remains in the browsers memory (for example, if I have an event in this .js file, this event gets repeated as many times I had loaded the file, even if i have deleted the script element from the DOM).

Is there any way to get this work? I don't want to include all the .js files at once (ther are too many), I want to loaded and unloaded them by demand.

If the issue is that the code is being *repeated*, then, wouldn't it be more effective to just load the code once, instead of several times? — JCOC611, Oct 15 '11 at 23:46
So, at demand, you load the code once, and you have a variable that says whether or not the file was loaded before, so if it was, then just delete the ` — JCOC611, Oct 15 '11 at 23:51
Yes, the perfect solution would be to load all the .js files at once and only load with AJAX the HTML fragments. Unfortunately there are like 50 html pages with their corresponding .js files, it would be too much load for the start (and probably the user will only use few of them). — Rich, Oct 15 '11 at 23:57
Yes, but what I'm saying is to load the JS with AJAX too, but only once, when it's first requested. (the other times, the script node is stripped out of the string that the AJAX request returns) — JCOC611, Oct 16 '11 at 00:00
I guess I could load the .js file the first time and creat a cookie indicating that this file has been loaded. The second time I loaded it I could check if the cookie exists to avoid a second loaded (or something like that) — Rich, Oct 16 '11 at 00:05

Brian Nickel · Answer 1 · 2011-10-16T00:25:56.827

JavaScript unloading could theoretically be done by removing the script tag (as you are doing with .html and by eliminating all references to any objects associated with the script. This involves deleting every reference and event listener. Even one left could keep that variable's functional scope in memory causing a leak.

It would be smart to use regular expressions to remove the scripts if the have been loaded already. (Credit to @JCOC611 for the idea of stripping tags.) Something like:

var usedScripts = {};

html = html.replace(/<script\s+src="([^"]+)"><\/script>/gi, function(str, file) {
    if(usedScripts[file]) {
        return "";
    } else {
        usedScripts[file] = true;
        return str;
    }
});

If you have a finite number of pages, what I prefer to do is have an object:

{
    myPage: {
        html:   'myhtml.html',
        script: 'myscript.js'
    }
}

Then have a loader function which simultaneously loads the script with document.createElement('script') and loads the page with HTML. You could easily check if that script has been used and skip loading.

Unload external .js file

1 Answers1

Linked