원격 자바 스크립트가로드 된 후 로컬 Javascript를 실행 하시겠습니까?

Question

나는 jquery/ajax를 사용하여 HTML/JS 묶음을 다른 구성 요소에서 풀어 페이지에 삽입하는 페이지가 있습니다. 그 HTML은 추가 JS 파일을 참조하며 자바 스크립트를 실행하기 전에 참조 할 JS 파일이로드되어 있어야합니다.

<script type="text/javascript" src="http://myserver/js/ABunchOfStuff.js"></script> 
<div> 
    blah blah blah 
</div> 
<script type="text/javascript"> 
    //"sourceList" is defined in the ABunchOfStuff.js above, but it's not available by the time this executes. 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
</script> 

은 일반적으로 그냥 창로드 이벤트 또는 $ (문서)에 훅 것이다 .ready() 또는 어떤하지만,이 지역 :

주입되고있는 HTML/JS는 다음과 같이 보입니다 윈도우와 문서가 이미 완전히로드 된 경우, 이제 사실 이후에 추가 컨텐츠를 추가 할 것입니다.

하나의 가능성은 참조 된 javascript가 사용 가능할 때까지 계속 실행되는 반복적 인 setTimeout 호출을 넣는 것일 수 있습니다.하지만 그건 꽤 못 생깁니다.

그래서 참조 된 자바 스크립트의 이벤트를 트래핑하고 그 시간에 코드를 실행하는 깨끗한 방법이 있습니까?

감사

Answer 1

또한 getScript를 사용하고 성공 콜백에 autoComplete을 수행 할 수 있습니다

jQuery.getScript('http://myserver/js/ABunchOfStuff.js', function(data, textStatus) { 
     $("input#autocomplete").autocomplete({ 
      source: sourceList, 
      minLength: 2 
     }); 
}); 

Answer 2

큰 문제는, 방법이 스크립트를 삽입합니까?

"표준"스크립트 태그 삽입을 사용하는 경우 onload 이벤트 (IE에서는 onreadystatechange)를 볼 수 있습니다.

var scr = document.createElement('script'); 
    scr.type = 'text/javascript'; 
    scr.src = 'somewhere/somename.js'; 
    scr.onload = scr.onreadystatechange = function() { 
     if(/complete|loaded/.test(scr.readyState)) { 
      // do something 
     } 
     else { 
      // do something 
     } 
    }; 

Answer 3

여기서 잘못된 것은 DOM로드를 기다리는 것이 아닙니다.

경우에만 DOM이는 ABunchOfStuff.js

이 같이

실행 한 것입니다 $(document).ready를 통해로드되면 실행에 .autocomplete을 변경하는 경우 : 당신이 http://myserver/js/ABunchOfStuff.js 파일을 제어 할 경우

(function($) { 
    $(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
    } 
}(jQuery)); 

Answer 4

을, 다음 처음 실행될 때 다른 JS를 호출 할 수 있습니다. 처음로드 될 때 실행되고 사용 가능할 때 완벽한 타이밍을가집니다. 모든 웹에서 다음

try { 
    if (aBunchOfStuffCallbacks) { 
     for (var i = 0; i < aBunchOfStuffCallbacks.length; i++) { 
      aBunchOfStuffCallbacks[i].call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

그리고 :

이 JS 경우 파일은 그것이 뭔가를 추가하여 실행 할 때 콜백을 호출하기 위해 몇 가지 일반적인 기능을 추가 할 수 있습니다, 너무 다른 장소를 사용 당신이 aBunchOfStuffCallbacks이로드 될 때 호출 할 페이지는, 당신은이 작업을 수행 할 것입니다 :

var aBunchOfStuffCallbacks = []; 
aBunchOfStuffCallbacks.push(myFunc); 
function myFunc() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
} 

이 여러 콜백을 허용합니다. 이것이 그것을 설정과 같을 것이다,

try { 
    if (aBunchOfStuffCallback) { 
      aBunchOfStuffCallback.call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

을 그리고 :

var aBunchOfStuffCallbacks = function() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
}