javascript - with - title jquery html




JQuery para carregar dinamicamente o arquivo JavaScript (2)

Eu tenho um arquivo javascript muito grande que gostaria de carregar apenas se o usuário clicar em um determinado botão. Eu estou usando o jQuery como meu framework. Existe um método ou plug-in integrado 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 (eu juntei todas as coisas do TinyMCE em um único arquivo JS), então chame tinyMCE.init (...).

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

Eu entendo que eu posso apenas fazer:

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

mas existe uma maneira melhor / encapsulada?


Eu percebo que estou um pouco atrasado aqui (5 anos ou mais), mas acho que há uma resposta melhor do que a aceita como segue:

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

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

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

Se um usuário clicar no link #addComment várias vezes, o tinymce.js será recarregado de um URL com timestamp. Isso anula o objetivo do cache do navegador.

===

Como alternativa, na documentação do getScript() , há um código de exemplo que demonstra como habilitar o armazenamento em cache criando uma função personalizada do cachedScript() 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ê quiser desabilitar o cache globalmente, você pode fazer isso usando ajaxSetup() seguinte maneira:

$.ajaxSetup({
    cache: true
});

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

Você pode querer verificar se o TinyMCE está definido, antes de incluí-lo (para chamadas subsequentes para 'Adicionar Comentário'), então o código pode ser algo como isto:

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

Supondo que você só tenha que chamar o init uma vez, isso é. Se não, você pode descobrir daqui :)





lazy-loading