How can I dynamically unload a javascript file?

I am including pages using Ajax but I also need to include their respective javascript files, which requires removing the previous javascript files from memory at the same time.

How can I unload the currently-loaded javascript files (as well as their code in memory) so that I can load the new page's files? They will more than likely conflict, so having multiple independent files' javascript files loaded.



This really sounds like you need to reevaluate your design. Either you need to drop ajax, or you need to not have collisions in you method names.

You can review this link:

Which gives information on how to remove the javascript from the DOM. However, modern browsers will leave the code in memory on the browser.


you can just namespace your code.. that way you prevent collisions

var MyJavaScriptCode = {};

MyJavaScriptCode.bla = function () {};


Actually that's quite possible. You can replace an script or link element.

function createjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("src", filename)

else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
  return fileref

function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
        var newelement=createjscssfile(newfilename, filetype)
        allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])

you must fill filename parameters as src attribute and filetype as "js" or "css"

I think there's no need to explain the code. Also you've posted in 2009 but hey. Maybe someone will need it right? :)

All credit goes to:

You can learn some tricks there btw.


No, you can't do that. Once a block of JavaScript gets loaded in the browser and executed, it gets stored in browser memory under the scope of the respective window. There is absolutely no way to unload it (without page refresh/window close).


It is possible to unload a javaScript file clearing the entire code from the browser. The steps are:

  1. Give an ID to the target "script" element (e.g. "mainJs", pointing to "main.js")
  2. Create another JS file (e.g "flush.js"), with the same functions and variables in "main.js", and make sure the functions and variables contents are empty.
  3. After "main.js" has been used up, we flush it by deleting the "script#mainJs" element and loading the "flush.js" dynamically into the DOM tree.


mainJs    = document.getElementById("mainJs");
document.head.removeChild(mainJS);//Remooves main.js from the DOM tree

flushFile = document.createElement("script");
flushFile.setAttribute("src", "flush.js");
document.head.appendChild(flushFile);//Loads flush.js into the DOM tree, overwriting all functions and variables of main.js in browser memory to null

That's it


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.