Question

I have these three script files

<script type="text/javascript" src="script/inbox.js"></script>
<script type="text/javascript" src="script/news.js"></script>
<script type="text/javascript" src="script/friend.js"></script>

I am loading these files dynamically when user clicks certain links.

for example
when user clicks inbox inbox.js is loaded and in similar manner.

All these files inbox.js,news.js,friend.js all have code that handles scroll event.
Now even when user has switched to news from inbox still the handler for scroll in news is also getting called. I need to ensure that the handler for only that tab is callled when user is at particular tab.

Some directions that can be proceeded in to solve the problem is –

1. Dynamically unload the other script file from the document.
2. Unbind the scroll handler for the other tabs.
3. Some how I can assign ID or class to these script file and unload them.

Please help me, which of these would be better way.

Answer 1

function removejscssfile(filename, filetype){
 var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"      
 var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"     
 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("inbox.js", "js") //remove all occurences of "somescript.js" on page

This function can be used to remove js or css any type of script from document dynamically..