JQuery para carregar o arquivo Javascript dinamicamente

134

Eu tenho um arquivo javascript muito grande que gostaria de carregar apenas se o usuário clicar em um determinado botão. Estou usando o jQuery como minha estrutura. Existe um método ou plug-in embutido que me ajudará a fazer isso?

Mais alguns detalhes: Eu tenho um botão "Adicionar comentário" que deve carregar o arquivo javascript do TinyMCE (juntei todas as coisas do TinyMCE em um único arquivo JS) e chame tinyMCE.init (...).

Não quero carregar isso no carregamento da página inicial, porque nem todo mundo clicará em "Adicionar comentário".

Eu entendo que posso apenas fazer:

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

mas existe uma maneira melhor / encapsulada?

Jeff Meatball Yang
fonte
Este é um ótimo fork do compressor TinyMCE, que adiciona carregamento assíncrono do TinyMCE por meio do plug-in jQuery.tinyMCE e inclui Gzip, concatenação e minificação: github.com/bobbravo2/tinymce_compressor/blob/master/…
Bob Gregor

Respostas:

200

Sim, use getScript em vez de document.write - ele permitirá um retorno de chamada assim que o arquivo for carregado.

Porém, convém verificar se o TinyMCE está definido antes de incluí-lo (para chamadas subseqüentes a 'Adicionar comentário'), para que o código se pareça com o seguinte:

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

Supondo que você só precise chamá init-lo uma vez. Caso contrário, você pode descobrir a partir daqui :)

Paolo Bergantino
fonte
3
@ Joseph: Obrigado :), @ Jeff: Não há problema. No que diz respeito à grandiosidade do jQuery, este é bastante desconhecido.
Paolo Bergantino
1
TLDR; faça isso apenas se os scripts estiverem no mesmo diretório. Versão mais longa: o getScript realmente injeta o javascript nos scripts atuais em vez da página. o que isso significa é que qualquer caminho no javascript incluído será relativo ao documento atual.
Tom Carchrae
23

Sei que estou um pouco atrasado aqui, (cinco anos ou mais), mas acho que há uma resposta melhor do que a aceita da seguinte forma:

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

A getScript()função realmente impede o cache do navegador . Se você executar um rastreamento, verá que o script é carregado com uma URL que inclui um parâmetro de carimbo de data / hora:

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

Se um usuário clicar no #addCommentlink várias vezes, tinymce.jsserá recarregado a partir de um URL com carimbo de data e hora diferente. Isso anula o objetivo do cache do navegador.

===

Como alternativa, na getScript()documentação, há um código de amostra que demonstra como habilitar o cache criando uma cachedScript()função personalizada da seguinte maneira:

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

===

Ou, se você deseja desativar o cache globalmente, pode fazê-lo usando ajaxSetup()o seguinte:

$.ajaxSetup({
    cache: true
});
dana
fonte
Isso pode não estar disponível quando você escreveu isso, mas observe que o jQuery permite (globalmente) desativar esse recurso sem armazenamento em cache e permitir o armazenamento em cache novamente. Ver api.jquery.com/jQuery.getScript/#caching-requests (Oh, eu vejo o $ .ajax () se aproximar de você cobrir aqui é mencionado lá também.)
Peter Hansen
@ PeterHansen - Obrigado pela dica. Eu atualizei minha resposta com sua sugestão.
dana
3
jQuery 1.12.0 ou posterior suporte desativando a linha anticache assim:$.getScript({url: "test.js",cache:true})
oriadam