[스크랩] jQuery로 외부 JavaScript 파일 동적으로 실행하기

출처 : http://jsonobject.tistory.com/209

HTML에서 JavaScript 파일 실행하기

HTML 문서에서 독립된 파일의 JavaScript 소스 코드를 실행하기 위해서는 head 또는 body 엘러먼트의 자식 엘러먼트로 아래와 같이 script 엘러먼트를 작성하는 방법이 일반적으로 많이 쓰인다.

<!-- CDN에 위치한 Velocity.js 소스 코드를 실행한다.-->
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

jQuery를 이용하여 JavaScript 파일을 동적으로 실행해보자

그렇다면 HTML이 아닌 JavaScript 레벨에서 외부의 JavaScript 소스 코드를 실행하는 것이 가능할까? 가능하다. 단순히 script 엘러먼트를 생성하고 src 애튜리뷰트를 부여 후 DOM에 추가하면 된다. jQuery를 사용하면 아래와 같이 한 줄의 명령으로 실행할 수 있다.

// Velocity.js 소스 코드를 동적으로 실행한다. 당연히 웹 브라우저의 콘솔 창에서도 실행된다.
$.getScript( '//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js' );

보다 견고하게 로직을 작성하려면 스크립트 파일의 실행 성공 여부에 따라 아래와 같이 콜백 메써드를 작성할 수 있다.

var successCallback = function() {
        // 성공시에는 문서의 투명도를 반으로 줄인다.
        $( 'body' ).velocity({
            opacity: 0.5
        });
    },
    failCallback = function() {
        // 실패시에는 실행 실패 메시지를 출력한다.
        alert( 'Failed to load Velocity.js.' );
    };

$.getScript( '//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js' ).done( successCallback ).fail( failCallback );