জাভাস্ক্রিপ্ট ফাইলটি গতিশীলভাবে লোড করার জন্য JQuery

Question

আমার কাছে একটি খুব বড় জাভাস্ক্রিপ্ট ফাইল রয়েছে যখন ব্যবহারকারী কোনও নির্দিষ্ট বোতামে ক্লিক করে তবেই আমি লোড করতে চাই। আমি আমার কাঠামো হিসাবে jQuery ব্যবহার করছি। এমন কোনও অন্তর্নির্মিত পদ্ধতি বা প্লাগইন আছে যা আমাকে এটি করতে সহায়তা করবে?

আরও কিছু বিশদ: আমার কাছে একটি "মন্তব্য যুক্ত করুন" বোতাম রয়েছে যা টিনিএমসিএ জাভাস্ক্রিপ্ট ফাইলটি লোড করা উচিত (আমি সমস্ত টিনিএমসিই স্টাফগুলি একক জেএস ফাইলে সিদ্ধ করে দিয়েছি), তারপরে tinyMCE.init কল করুন ... ())।

আমি এটি প্রাথমিক পৃষ্ঠা লোডে লোড করতে চাই না কারণ সবাই "মন্তব্য যুক্ত করুন" এ ক্লিক করবেন না।

আমি বুঝতে পারি আমি ঠিক করতে পারি:

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

তবে কি আরও ভাল / এনক্যাপসুলেটেড উপায় আছে?

Comments

এটি টিনিএমসিই কমপ্রেসারের একটি দুর্দান্ত কাঁটা, যা jQuery.tinyMCE প্লাগইনের মাধ্যমে টিনিএমসিএর অ্যাসিনক্রোনাস লোড যুক্ত করে এবং এতে জিজিপ, কনটেনটেশন

— বব

Answer 1

হ্যাঁ, ডকুমেন্ট.ওরাইটের পরিবর্তে গেটস্ক্রিপ্ট ব্যবহার করুন - এটি একবার ফাইল লোড হওয়ার পরে কলব্যাকের অনুমতি দেবে।

আপনি এটি পরীক্ষা করার আগে TinyMCE সংজ্ঞায়িত হয়েছে কিনা তা পরীক্ষা করতে পারেন (যদিও পরবর্তী মন্তব্যগুলির জন্য 'মন্তব্য যুক্ত করুন') যাতে কোডটি এর মতো দেখতে পারে:

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

ধরে নিচ্ছি আপনাকে কেবল initএকবার এটি কল করতে হবে, এটি। যদি তা না হয় তবে আপনি এখান থেকে এটি বের করতে পারেন :)

Comments

@ জোস: ধন্যবাদ :), @ জেফ: কোনও সমস্যা নেই। যতক্ষণ না jQuery দুর্দান্ততা এটি মোটামুটি অজানা।

— পাওলো বার্গান্টিনো

TLDR; স্ক্রিপ্টগুলি একই ডিরেক্টরিতে থাকলে কেবল এটি করুন। দীর্ঘতর সংস্করণ: getScript আসলে জাভাস্ক্রিপ্টটিকে পৃষ্ঠার পরিবর্তে বর্তমান স্ক্রিপ্টগুলিতে ইনজেক্ট করে। এর অর্থ কী অন্তর্ভুক্ত জাভাস্ক্রিপ্টের কোনও পাথ বর্তমান নথির সাথে সম্পর্কিত।

— টম ক্র্যাচরে

Answer 2

আমি বুঝতে পারি যে আমি এখানে কিছুটা দেরি করেছি (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
});

Comments

আপনি এটি লেখার সময় এটি উপলব্ধ ছিল না but Api.jquery.com/jQuery.getScript/#casing-requests দেখুন (ওহ, আমি এখানে cover .AXAX () দেখতে পেলাম সেখানেও উল্লেখ করা হয়েছে।)

— পিটার হ্যানসেন

@ পিটারহানসেন - টিপটির জন্য ধন্যবাদ। আমি আপনার পরামর্শ দিয়ে আমার উত্তর আপডেট।

— দানা

jQuery 1.12.0 বা পরবর্তীকালে এন্টিচে আচ্ছাদিত ইনলাইনটি অক্ষম করা সমর্থন করে:$.getScript({url: "test.js",cache:true})

— অরিডাম