138

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

詳細: TinyMCE javascript ファイルをロードする [コメントを追加] ボタンがあります (すべての TinyMCE を 1 つの JS ファイルにまとめました)、tinyMCE.init(...) を呼び出します。

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

私はただできることを理解しています：

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

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

4

2 に答える 2

204

はい、 document.write の代わりにgetScriptを使用してください。ファイルが読み込まれると、コールバックも可能になります。

ただし、TinyMCE を含める前に ('Add Comment' への後続の呼び出しのために)、TinyMCE が定義されているかどうかを確認すると、コードは次のようになります。

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

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

于 2009-05-26T20:54:32.763 に答える
23

私はここで少し遅れていることを認識しています（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リンクを複数回クリックするtinymce.jsと、タイムスタンプが異なる URL から再ロードされます。これは、ブラウザのキャッシュの目的を無効にします。

===

または、ドキュメントには、次のようにカスタム関数を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
});
于 2014-05-02T19:30:15.133 に答える