2010-04-29 2 views
2

에서 변수에 액세스 할 수 없습니다내가 자바 스크립트를 동적으로로드하는 비교적 간단한 시스템을 사용하고 동적으로로드 된 자바 스크립트

include = function (url) { 
    var e = document.createElement("script"); 
    e.src = url; 
    e.type="text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(e); 
}; 

의 나는 다음과 같은 내용이있는 파일 test.js 있다고 가정 해 봅시다 :

var foo = 4; 

지금, 내 원래 스크립트에, 나는 그러나

include(test.js); 
console.log(foo); 

사용할 , 나는이 'foo는 정의되지 않은'얻을 에로 이것에 대해서. 나는 동적 스크립트가 <head> 태그의 마지막 자식으로 포함되는 것과 관련이 있다고 생각합니다. 어떻게 작동시킬 수 있습니까?

답변

3

하나의 문제이지만 브라우저에서 원격 JS 파일을 다운로드하고 구문 분석하는 데 시간이 걸리며 console.log으로 전화하기 전에 완료하지 않았습니다.

스크립트가로드 될 때까지 지연시켜야합니다.

라이브러리를 무겁게 만들면 가장 쉽게 수행 할 수 있습니다. jQuery에는 스크립트가로드 될 때 콜백을 전달할 수있는 getScript 메서드가 있습니다.

5

스크립트가로드 될 때까지 기다려야하기 때문입니다. 생각하는 것처럼 동기가 아닙니다. 이 방법이 유용 할 수 있습니다.

include = function (url, fn) { 
    var e = document.createElement("script"); 
    e.onload = fn; 
    e.src = url; 
    e.async=true; 
    document.getElementsByTagName("head")[0].appendChild(e); 
}; 

include("test.js",function(){ 
    console.log(foo); 
}); 
+0

멋진 간단한 스크립트. 하지만 어떻게 실패 이벤트 (예 : 연결이 설정되지 않았거나 404 등)를이 이벤트에 통합 할 수 있습니까? – user1517108

관련 문제