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

Program / 글쓴이

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

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

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

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

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

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

답변

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

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

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

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

답변

나는 여기에 조금 늦었다는 것을 알고 있지만 (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
});

답변