jQuery로 외부 JavaScript 파일 동적으로 실행하기

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

참고 문서

• jQuery.getScript()