외부 JavaScript/Css 파일_javascript 기술의 코드를 동적으로 로드/삭제/업데이트합니다.

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");