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.

Answers:

Answer

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: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

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

Answer

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

var MyJavaScriptCode = {};

MyJavaScriptCode.bla = function () {};

Answer

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("type","text/javascript")
  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: http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

You can learn some tricks there btw.

Answer

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).

Answer

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.

Example

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.