web-dev-qa-db-ja.com

JavaScriptファイルを動的にロードするJQuery

ユーザーが特定のボタンをクリックした場合にのみロードしたい非常に大きなjavascriptファイルがあります。フレームワークとしてjQueryを使用しています。これを行うのに役立つ組み込みのメソッドまたはプラグインはありますか？

さらなる詳細：TinyMCE javascriptファイル（すべてのTinyMCEの内容を1つのJSファイルに変換しました）をロードし、tinyMCE.init（...）を呼び出す「Add Comment」ボタンがあります。

誰もが「コメントを追加」をクリックするとは限らないため、最初のページの読み込み時にこれを読み込みたくありません。

私はちょうどできることを理解しています：

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

しかし、より良い/カプセル化された方法はありますか？

javascriptjqueryjquery-pluginstinymcelazy-loading
132
Jeff Meatball Yang

はい、document.writeの代わりに getScript を使用します。ファイルがロードされると、コールバックも許可されます。

ただし、TinyMCEが定義されるかどうかをチェックしてから、それを含める前に（「コメントの追加」への後続の呼び出しのために）、コードは次のようになります。

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

initを1回だけ呼び出す必要があると仮定します。そうでない場合は、ここから理解できます:)

199
Paolo Bergantino

ここで少し遅れていることに気付きます（5年ほど）が、受け入れられたものよりも良い答えがあると思います。

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

getScript() 関数は実際にブラウザーのキャッシュを防止します。トレースを実行すると、タイムスタンプパラメーターを含むURLがスクリプトにロードされていることがわかります。

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

ユーザーが#addCommentリンクを複数回クリックすると、タイムスタンプが異なるURLからtinymce.jsが再ロードされます。これは、ブラウザのキャッシュの目的を無効にします。

===

または、 getScript() のドキュメントには、次のようにカスタムcachedScript()関数を作成してキャッシュを有効にする方法を示すサンプルコードがあります。

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

===

または、グローバルにキャッシュを無効にする場合は、次のように ajaxSetup() を使用して無効にすることができます。

$.ajaxSetup({
    cache: true
});
21
dana