자바 스크립트 파일을 동적으로로드하는 JQuery


134

사용자가 특정 버튼을 클릭하는 경우에만로드하려는 매우 큰 자바 스크립트 파일이 있습니다. jQuery를 프레임 워크로 사용하고 있습니다. 이 작업을 수행하는 데 도움이되는 내장 메소드 또는 플러그인이 있습니까?

좀 더 자세한 내용 : TinyMCE 자바 스크립트 파일을로드해야하는 "댓글 추가"버튼이 있습니다 (모든 TinyMCE 항목을 단일 JS 파일로 끓였습니다). tinyMCE.init (...)를 호출합니다.

모든 사람이 "댓글 추가"를 클릭하지는 않기 때문에 초기 페이지로드시 이것을로드하고 싶지 않습니다.

나는 단지 할 수 있음을 이해합니다.

$("#addComment").click(function(e) { document.write("<script...") });

그러나 더 나은 / 캡슐화 된 방법이 있습니까?


이것은 TinyMCE 압축기의 큰 포크이며 jQuery.tinyMCE 플러그인을 통해 TinyMCE의 비동기 로딩을 추가하고 Gzip, 연결 및 축소를 포함합니다. github.com/bobbravo2/tinymce_compressor/blob/master/…
Bob Gregor

답변:


200

예. document.write 대신 getScript 를 사용 하십시오. 파일이로드되면 콜백도 가능합니다.

TinyMCE가 포함되어 있는지 확인하기 전에 ( '댓글 추가'에 대한 후속 호출) 코드가 다음과 같이 보일 수 있습니다.

$('#add_comment').click(function() {
    if(typeof TinyMCE == "undefined") {
        $.getScript('tinymce.js', function() {
            TinyMCE.init();
        });
    }
});

init한 번만 호출하면된다고 가정합니다 . 그렇지 않은 경우 여기에서 알아낼 수 있습니다. :)


3
@Jose : 감사합니다 :), @Jeff : 문제 없습니다. jQuery awesomeness가 진행되는 한 이것은 잘 알려져 있지 않습니다.
Paolo Bergantino

1
TLDR; 스크립트가 동일한 디렉토리에있는 경우에만이를 수행하십시오. 더 긴 버전 : getScript는 실제로 페이지 대신 현재 스크립트에 자바 스크립트를 주입합니다. 이것이 의미하는 것은 포함 된 자바 스크립트의 경로가 현재 문서와 관련이 있다는 것입니다.
Tom Carchrae

23

나는 여기에 조금 늦었다는 것을 알고 있지만 (5 년 정도) 다음과 같이 받아 들일 수있는 것보다 더 나은 대답이 있다고 생각합니다.

$("#addComment").click(function() {
    if(typeof TinyMCE === "undefined") {
        $.ajax({
            url: "tinymce.js",
            dataType: "script",
            cache: true,
            success: function() {
                TinyMCE.init();
            }
        });
    }
});

getScript()기능은 실제로 브라우저 캐싱을 방지합니다 . 추적을 실행하면 스크립트에 시간 소인 매개 변수가 포함 된 URL이로드 된 것을 볼 수 있습니다.

http://www.yoursite.com/js/tinymce.js?_=1399055841840

사용자가 #addComment링크를 여러 번 클릭하면 tinymce.js다르게 타임 스탬프가 지정된 URL에서 다시로드됩니다. 이것은 브라우저 캐싱의 목적을 상실합니다.

===

또는 getScript()문서에는 cachedScript()다음과 같이 사용자 정의 함수를 작성하여 캐싱을 사용하는 방법을 보여주는 샘플 코드가 있습니다.

jQuery.cachedScript = function( url, options ) {

    // Allow user to set any option except for dataType, cache, and url
    options = $.extend( options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });

    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax( options );
};

// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
    console.log( textStatus );
});

===

또는 전체적으로 캐싱을 사용하지 않으려면 ajaxSetup()다음과 같이 사용하십시오.

$.ajaxSetup({
    cache: true
});

이것을 작성할 때 사용할 수 없었을 수도 있지만 jQuery를 사용하면 (전역 적으로)이 캐싱 없음 기능을 비활성화하고 다시 캐싱 할 수 있습니다. api.jquery.com/jQuery.getScript/#caching-requests를 참조하십시오 (오, 여기에서 다루는 $ .ajax () 접근 방식도 여기에 언급되어 있습니다.)
Peter Hansen

@PeterHansen-팁 주셔서 감사합니다. 귀하의 제안으로 답변을 업데이트했습니다.
dana

3
jQuery 1.12.0 이상은 다음과 같이 안티 캐시 인라인 비활성화를 지원합니다 :$.getScript({url: "test.js",cache:true})
oriadam
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.