티스토리 뷰

프로그래밍

[JAVASCRIPT] javascript 로드하기

ReturnToHome 2016. 12. 24. 21:42

1)

LoadJS("http://wwww.site.com/js/callJS.js", fncCallback);

 

 

// JS 로드 메소드

function LoadJS(fileUrl,callback) { 
 var oHead = document.getElementsByTagName('HEAD').item(0); 
 var oScript= document.createElement("script"); 
 oScript.type = "text/javascript";
 oScript.src=fileUrl ;  
 oHead.appendChild(oScript); 
 if (document.addEventListener) { 
  oScript.onload = callback; 
  oScript.onerror = callback;
 } else {
  oScript.onreadystatechange = function(){ LoadJsReady(oScript,callback);}; 
 }
}
function LoadJsReady(obj,callBack) { 
 if (obj.readyState=="loaded") {  
  callBack();
 } 
}

 

// 콜백 메소드

function fncCallback() {

alert("load success");

}

 

 

 

 

 

 

2) 1과 같은 거지만 상세한 설명 포함

// 자바 스크립트 동적 로딩
function loadJS(jsUrl, callback) { 
 var head = document.getElementsByTagName('HEAD').item(0); 
 var script = document.createElement("script"); 
 script.type = "text/javascript";
 // 완료 여부 확인 후 후속처리
 // 1. IE 에서는 script.onload fnc 가 먹지 않기에 onreadystatechange 로 로딩이 완료 되었는지 여부를 확인
 var loaded = false;
 script.onreadystatechange = function() 
  // 서버에서 읽어올 경우 loaded, 캐쉬에서 가져올 경우 complete 이기에 둘 모두 처리
  if (this.readyState == 'loaded' || this.readyState == 'complete') {
   
   // loaded 가 일어나서 callback() 을 실행하였는데 또 complete 가 발생하여 다시 callback() 을 실행하는 것을 방지하기 위함
   if (loaded) return;
   loaded = true;
   callback();
  }
 }
 // 2. firefox, chrome 에서는 onload 가능.
 script.onload = function() {
  callback();
 }

// 3. 에러 시 콜백 함수 호출

// script.onerror = function() {

//     fncError();

// }
 script.src = jsUrl; 
 head.appendChild(script); 
}

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함