JavaScript/Csss 파일을 동적으로 로드
외부 JavaScript(*.js) 또는 Css(*.css) 파일을 로드하는 전통적인 방법은 해당 파일을
태그에 직접 추가하는 것입니다.
이러한 파일은 이러한 방식으로 현재 페이지에 동기적으로 로드됩니다.
이제 JavaScript/Css 파일을 동적으로 로드합니다.
DOM createElement 메소드를 사용하여 "스크립트" 또는 "링크" 요소를 생성합니다.
해당 속성을 설정합니다.
appendChild 메소드를 사용하여 삽입합니다. head 태그 끝에 생성된 요소
function loadjscssfile(filename, filetype){
//파일 형식이 .js인 경우 스크립트 태그를 생성하고 해당 속성을 설정합니다.
if (filetype=="js"){
var fileref =document.createElement('script');
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename); /if file 유형이 .css인 경우 스크립트 태그를 생성하고 해당 속성을 설정합니다.
else if (filetype=="css"){
var fileref=document.createElement("link")
fileref.setAttribute( "rel", "stylesheet");
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", 파일 이름);
if ( typeof fileref!="undefine")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
//동적으로 .js 파일 추가
loadjscssfile("myscript .js", "js");
//.js 파일을 추가하는 것과 마찬가지로 .php 파일을 동적으로 추가합니다.
loadjscssfile("javascript.php", "js")
//동적 .css 파일
loadjscssfile("mystyle.css", "css")
동일한 js/css 파일이 여러 개 로드되는 것을 방지하기 위해 번, 다음 판단을 추가하십시오 (이것은 단지 대략적인 감지입니다)
var filesadd="";
function checkloadjscssfile(filename, filetype){
if (filesadd.indexOf("[" filename "]") ==-1){
loadjscssfile( filename, filetype);//[filename]을 files added에 저장
files added ="[" filename "]"
}
else{
alert("파일이 이미 추가되었습니다!" );
}
//처음 로드
checkloadjscssfile("myscript.js", "js")
// 동일한 파일을 반복적으로 로드했는데 실패했습니다
checkloadjscssfile("myscript.js", "js");
JavaScript/Csss 파일의 동적 삭제
참고: ie6/7에서 스타일을 동적으로 삭제할 때 발생하는 버그 해결 방법: 1. 스타일 시트에 가져오기 스타일 시트가 없습니다. 2. 링크의 유형 속성을 null 값으로 설정한 다음 href 위치를 수정합니다. href를 null로 설정하고 마지막으로 유형 값을 "text/css"로 설정하면 IE가 새 스타일 시트를 해석하게 됩니다.
해당 DOM 요소 가져오기
파일 이름 및 파일 유형에 따라 요소 찾기
DOM RemoveChild를 사용하여 "스크립트" 또는 "링크" 요소 삭제
코드 복사
코드는 다음과 같습니다. function Removejscssfile(filename, filetype){ //파일 형식을 판단합니다.
var targetelement=(filetype == "js")? "script" : (filetype=="css")? "link" : "none"
//파일 이름 판단
var targetattr =(filetype=="js") ? "src" : (filetype=="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(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i])
}
}
removejscssfile("somescript.js ", "js");
removejscssfile("somestyle.css", "css");
JavaScript/Csss 파일을 동적으로 업데이트하세요
createElement를 사용하여 JavaScript/Css 요소 생성
교체할 요소 찾기
replaceChild로 요소 바꾸기
코드 복사
코드는 다음과 같습니다.
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");