Load and unload javascript at runtime [duplicate]

Question

Is it possible to add or remove JavaScript files and CSS files by JavaScript at run time? If it's not possible by JavaScript then, Can we do it by PHP or any other server site language?

Actually i tried by yep-nope js but i am not able to unload any javascript by it.

Answer 1

Check this , this and this

From the top link, to dynamically add js or css:

function loadjscssfile(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)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

Also, to dynamically remove js or css:

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
 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(filename)!=-1)
   allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
 }
}    
removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

But take note about removing:

So what actually happens when you remove an external JavaScript or CSS file? Perhaps not entirely what you would expect actually. In the case of JavaScript, while the element is removed from the document tree, any code loaded as part of the external JavaScript file remains in the browser's memory. That is to say, you can still access variables, functions etc that were added when the external file first loaded

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

At the max, all you can do is, set variables whatever was included in your javascript file to Null. But again this wouldn't eliminate the problem completely, but yes, any further access to those variables won't yield the result.

Answer 3

Is it possible to add or remove JavaScript files and CSS files by JavaScript at run time?

You can load JavaScript dynamically, however once you've loaded it, you can't unload JavaScript in an active page. You can reload a page, which will clear the active scripts, and start over. Alternatively you could override the functions that you've got set.

As far as CSS is concerned, you can add/remove <link.../> elements to add/remove stylesheets. Additionally you could add/remove <style> elements that might contain rules.

You could also use DHTML to modify any inline styles on elements within the page.