Javascript 파일을 동적으로 로드하기 위한 JQuery

Javascript 파일을 동적으로 로드하기 위한 JQuery

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

추가 세부 정보:TinyMCE Javascript 파일을 로드해야 하는 "Add Comment" 버튼이 있습니다(TinyMCE 항목을 모두 JS 파일 하나로 압축했습니다). 그런 다음 TinyMCE.init(...)를 호출합니다.

모든 사용자가 "댓글 추가"를 클릭하지 않기 때문에 처음 페이지 로드 시 이 메시지를 로드하고 싶지 않습니다.

제가 할 수 있는 일은 이해합니다.

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

하지만 더 나은 방법이 있을까요?

예, 문서 대신 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();
            }
        });
    }
});

이 기능은 실제로 브라우저 캐싱을 방지합니다.추적을 실행하면 스크립트에 타임스탬프 매개 변수가 포함된 URL이 로드되는 것을 볼 수 있습니다.

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

사용자가 클릭한 경우#addComment여러 번 연결,tinymce.js타임스탬프가 다른 URL에서 다시 로드됩니다.이렇게 하면 브라우저 캐싱의 목적을 달성할 수 없습니다.

===

또는 설명서에는 사용자 정의를 생성하여 캐싱을 활성화하는 방법을 보여주는 몇 가지 샘플 코드가 있습니다.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({
    cache: true
});

언급URL : https://stackoverflow.com/questions/912711/jquery-to-load-javascript-file-dynamically