JQuery untuk memuat file Javascript secara dinamis


135

Saya memiliki file javascript yang sangat besar yang ingin saya muat hanya jika pengguna mengklik tombol tertentu. Saya menggunakan jQuery sebagai kerangka kerja saya. Apakah ada metode atau plugin bawaan yang akan membantu saya melakukan ini?

Beberapa detail lebih lanjut: Saya memiliki tombol "Tambahkan Komentar" yang akan memuat file javascript TinyMCE (saya telah merebus semua hal TinyMCE menjadi satu file JS), lalu panggil tinyMCE.init (...).

Saya tidak ingin memuat ini pada pemuatan halaman awal karena tidak semua orang akan mengklik "Tambahkan Komentar".

Saya mengerti saya hanya bisa melakukan:

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

tetapi apakah ada cara yang lebih baik / dikemas?


Ini adalah percabangan hebat dari kompresor TinyMCE, yang menambahkan pemuatan TinyMCE secara asinkron melalui plugin jQuery.tinyMCE, dan termasuk Gzip, penggabungan, dan minifikasi
Bob Gregor

Jawaban:


200

Ya, gunakan getScript daripada document.write - bahkan akan memungkinkan panggilan balik setelah file dimuat.

Anda mungkin ingin memeriksa apakah TinyMCE sudah ditentukan, sebelum memasukkannya (untuk panggilan berikutnya ke 'Tambahkan Komentar') sehingga kodenya mungkin terlihat seperti ini:

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

Dengan asumsi Anda hanya perlu memanggilnya initsekali, itu saja. Jika tidak, Anda bisa mengetahuinya dari sini :)


3
@ Jose: Terima kasih :), @Jeff: Tidak masalah. Sejauh kehebatan jQuery yang satu ini cukup tidak diketahui.
Paolo Bergantino

1
TLDR; hanya lakukan ini jika skrip berada di direktori yang sama. Versi yang lebih panjang: getScript sebenarnya menyuntikkan javascript ke dalam skrip saat ini, bukan ke halaman. apa artinya adalah setiap jalur pada javascript yang disertakan akan relatif terhadap dokumen saat ini.
Tom Carchrae

23

Saya menyadari saya sedikit terlambat di sini, (5 tahun atau lebih), tetapi saya pikir ada jawaban yang lebih baik daripada yang diterima sebagai berikut:

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

The getScript()Fungsi sebenarnya mencegah cache browser . Jika Anda menjalankan pelacakan, Anda akan melihat skrip dimuat dengan URL yang menyertakan parameter stempel waktu:

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

Jika pengguna mengklik #addCommentlink beberapa kali, tinymce.jsakan dimuat ulang dari URL dengan stempel waktu yang berbeda. Ini mengalahkan tujuan cache browser.

===

Selain itu, dalam getScript()dokumentasi terdapat beberapa kode contoh yang menunjukkan cara mengaktifkan cache dengan membuat cachedScript()fungsi kustom sebagai berikut:

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

===

Atau, jika Anda ingin menonaktifkan caching secara global, Anda dapat melakukannya dengan cara ajaxSetup()berikut:

$.ajaxSetup({
    cache: true
});

Ini mungkin tidak tersedia saat Anda menulis ini, tetapi perhatikan bahwa jQuery memungkinkan Anda (secara global) untuk menonaktifkan fitur no-caching ini dan mengizinkan caching lagi. Lihat api.jquery.com/jQuery.getScript/#caching-requests (Oh, saya melihat pendekatan $ .ajax () yang Anda bahas di sini juga disebutkan di sana.)
Peter Hansen

@PeterHansen - Terima kasih atas tipnya. Saya memperbarui jawaban saya dengan saran Anda.
dana

3
jQuery 1.12.0 atau yang lebih baru mendukung penonaktifan anticache inline seperti ini:$.getScript({url: "test.js",cache:true})
oriadam
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.