Javascript dosyasını dinamik olarak yüklemek için JQuery

Yalnızca kullanıcı belirli bir düğmeyi tıklattığında yüklemek istediğiniz çok büyük bir javascript dosyası var. Çerçeve olarak jQuery kullanıyorum. Bunu yapmama yardımcı olacak yerleşik bir yöntem veya eklenti var mı?

Biraz daha ayrıntı: TinyMCE javascript dosyasını yüklemeniz gereken bir "Yorum Ekle" düğmesi var (tüm TinyMCE öğelerini tek bir JS dosyasına kaynattım), sonra tinyMCE.init (...) 'i çağırıyorum.

Bunu ilk sayfa yüklemesinde yüklemek istemiyorum çünkü herkes "Yorum Ekle" yi tıklamayacak.

Sadece yapabileceğimi anlıyorum:

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

ama daha iyi / kapsüllenmiş bir yol var mı?

Evet, document.write yerine getScript kullanın - dosya yüklendikten sonra geri aramaya bile izin verir.

Yine de, TinyMCE'nin tanımlanıp tanımlanmadığını kontrol etmeyi isteyebilirsiniz (kod daha sonra 'Yorum Ekle'ye yapılan çağrılar için), böylece kod şöyle görünebilir:

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

Sadece bir initkez aramak zorunda olduğunuzu varsayarsak , yani. Değilse, buradan anlayabilirsiniz :)

Burada biraz geç kaldığımı fark ettim (5 yıl kadar), ama bence kabul edilen cevaptan daha iyi bir cevap var:

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

getScript()Fonksiyon aslında tarayıcının önbelleğe önler . Bir izleme çalıştırırsanız, komut dosyasının bir zaman damgası parametresi içeren bir URL ile yüklendiğini görürsünüz:

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

Bir kullanıcı #addCommentbağlantıyı birden çok kez tıklarsa, tinymce.jsfarklı bir zaman damgalı URL'den yeniden yüklenir. Bu, tarayıcı önbelleğe almanın amacını yener.

===

Alternatif olarak, getScript()belgelerde cachedScript()aşağıdaki gibi özel bir işlev oluşturarak önbelleğe almanın nasıl etkinleştirileceğini gösteren bazı örnek kodlar vardır :

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

===

Veya, genel olarak önbelleğe almayı devre dışı bırakmak istiyorsanız, bunu ajaxSetup()aşağıdaki gibi kullanarak yapabilirsiniz :

$.ajaxSetup({
    cache: true
});