krisred
asked on
Dynamically load js or css file into DOM - question
Hello,
I am using the code below to load js and css dynamically. I just want to know when I am calling it in a page will it load multiple times or will it load only instance if it already exists in DOM.
Please advise
I am using the code below to load js and css dynamically. I just want to know when I am calling it in a page will it load multiple times or will it load only instance if it already exists in DOM.
Please advise
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)
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
What I am doing is calling javascript and css to load when a link in clicked. it loads the data in a pane using ajax. but I don't want to do is keep reloading the same javascript and css every time the link is clicked.
so do you advise to remove the instance and reload using the following function
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()
}
}SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>>but I don't want to do is keep reloading the same javascript and css every time the link is clicked.
What I posted avoids exactly that problem.
What I posted avoids exactly that problem.
when you call that function to include a .js file.. assuming you fulfill the arguments properly, then it will include it in the DOM. It wont check to see if it's already been included or not.