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

Question

Çok büyük bir javascript dosyası var Sadece yüklemek istediğim kullanıcı belirli bir düğmeye basıyor. JQuery'yi çerçevem ​​olarak kullanıyorum. Bunu yapmama yardımcı olacak yerleşik bir yöntem mi yoksa eklenti mi var?

Biraz daha ayrıntı: TinyMCE javascript dosyasını yüklemesi gereken bir "Yorum Ekle" düğmesi (tüm TinyMCE öğelerini tek bir JS dosyasına indirdim) ve ardından tinyMCE.init (...).

Bunu ilk sayfa yüküne yüklemek istemiyorum çünkü herkes "Yorum Ekle" ye tıklayamaz.

Yaptığım sadece olabileceğini anlıyoruz:

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

ama daha iyi/kapsüllü yol var?

Answer 1

Evet, document.write yerine getScript kullanın - dosya yüklendikten sonra bir geri arama için bile izin verecektir.

Sen TinyMCE tanımlanması durumunda ('Yorum Ekle' sonraki çağrılar için) dahil etmeden önce olsa da, kontrol etmek isteyebilirsiniz böylece kodu şöyle görünebilir: Yalnızca zorunda varsayarsak

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

Bir kez init arayın, yani. Değilse, (5 yıl ya da öylesine), Ben geç burada küçük olduğumu fark :) buradan

Answer 2

onu anlamaya, ancak aşağıdaki gibi kabul ettim olandan daha iyi bir yanıt olduğunu düşünüyorum:

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

getScript() işlevi aslında tarayıcının önbelleğe önler. Bir izlemesi çalıştırırsanız komut dosyası bir zaman damgası parametresi içeren bir URL ile yüklenir göreceksiniz: Bir kullanıcı #addComment bağlantısı, birden çok kez, tinymce.js bir farklı timestampped URL'den yeniden yüklenecek tıkladığında

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

edin. Bu, tarayıcı önbelleklemenin amacını ortadan kaldırır.

=== Alternatif

, getScript() belgelerinde aşağıdaki gibi özel bir cachedScript() işlev oluşturarak önbelleğe etkinleştirme gösteren bir örnek kod 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, tüm dünyada önbelleğe almayı devre dışı bırakmak isterseniz, ajaxSetup() kullanarak aşağıdaki gibi yapabilirsiniz:

$.ajaxSetup({ 
    cache: true 
});