如何动态卸载 javascript 文件？

Question

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.

Answer 1

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 2

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 3

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

var MyJavaScriptCode = {};

MyJavaScriptCode.bla = function () {};

Answer 4

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 5

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 (eg " mainJs ", pointing to " main.js ")
2. Create another JS file (eg " 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

Answer 6

Exactly the similar requirement I've and I've tried in following way but it requires a small coding part from developer side even.

I've a js file with 20+ functions as below and file name is profile.js

function myprofile(){
//code block A
}  
function updateprofile(){
//code block B
}....
var functionsInJs=["myprofile","updateprofile",...]

Now I've written a method to clear the memory of this file as follows

function unloadJs(array){
    array.forEach(function(eachJsFn){
         window[eachJsFn]=undefined;//Clearing the functionality of js function in browsers window
    }
}

So, while to unload js functions i'll pass the array of function names in it.