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