Home > Web Front-end > JS Tutorial > Dynamically load/delete/update the code of external JavaScript/Css files_javascript skills

Dynamically load/delete/update the code of external JavaScript/Css files_javascript skills

WBOY
Release: 2016-05-16 18:23:51
Original
1146 people have browsed it

Dynamically loading JavaScript/Csss files
The traditional method of loading external JavaScript (*.js) or Css (*.css) files is to add them directly in the tag:

Copy code The code is as follows:







These files will be loaded synchronously to the current page in this way.

Now load JavaScript/Css files dynamically:

Create a "script" or "link" element using the DOM createElement method
Set the corresponding attributes
Use appendChild Method, insert the created element at the end of the head tag
Copy the code The code is as follows:

function loadjscssfile(filename, filetype){
//If the file type is .js, create a script tag and set the corresponding attributes
if (filetype=="js"){
var fileref=document. createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
//if file If the type is .css, create a script tag and set the corresponding attributes
else if (filetype=="css"){
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);
}
//Dynamicly add a .js file
loadjscssfile("myscript .js", "js");
//Dynamicly add a .php file just like adding a .js file
loadjscssfile("javascript.php", "js");
//Dynamic one .css file
loadjscssfile("mystyle.css", "css");


In order to prevent the same js/css file from being loaded multiple times, add the following judgment (this is just Rough detection)
Copy code The code is as follows:

//Temporarily loaded file name
var filesadded="";

function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("[" filename "]")==-1){
loadjscssfile( filename, filetype);
//Save [filename] into filesadded
filesadded ="[" filename "]";
}
else{
alert("file already added!" );
}

//Load for the first time
checkloadjscssfile("myscript.js", "js");
//Load the same file repeatedly, failed
checkloadjscssfile("myscript.js", "js");


Dynamic deletion of JavaScript/Csss files
Note: There is a bug when dynamically deleting styles under ie6/7. 2 types Solution: 1. Do not have an import style sheet in the style sheet. 2. Set the type attribute of the link to a null value, then modify the href location, or directly set the href to null, and finally set the type value to "text/ css" forces IE to interpret the new style sheet.

Get the corresponding DOM element
Locate the element according to the file name & file type
Use DOM removeChild to delete a "script" or "link" element
Copy code The code is as follows:

function removejscssfile(filename, filetype){
//Judge the file type
var targetelement=(filetype == "js")? "script" : (filetype=="css")? "link" : "none";
//Judge the file name
var targetattr=(filetype=="js") ? "src" : (filetype=="css")? "href" : "none";
var allsuspects=document.getElementsByTagName(targetelement);
//Traverse elements and delete matching elements
for (var i=allsuspects.length; i>=0; i--){
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute( targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]);
}
}

removejscssfile("somescript.js ", "js");
removejscssfile("somestyle.css", "css");


Dynamicly update JavaScript/Csss files
Use createElement to create the JavaScript/Css element
Find the element to be replaced
Replace the element with replaceChild
Copy the code The code is as follows:

function createjscssfile(filename, filetype){
if (filetype=="js"){ //filename이 외부 JavaScript 파일인 경우
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ // filename이 외부 CSS 파일인 경우
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/ css")
fileref.setAttribute("href", filename)
}
return fileref
}

function replacementjscssfile(oldfilename, newfilename, filetype){
var targetelement =(파일 유형=="js")? "스크립트": (filetype=="css")? "링크": "없음";
var targetattr=(filetype=="js")? "src": (파일 유형=="css")? "href" : "없음";
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){
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]);
}
}
}
//용 "newscript.js" 替换 "oldscript.js"
replacejscssfile("oldscript.js", "newscript.js", "js") ;
//용 "newscript.css" 替换 "oldscript.css"
replacejscssfile("oldstyle.css", "newscript.css","css");

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template