কীভাবে পৃষ্ঠা লোডের পরে jQuery এর মাধ্যমে একটি <script> ট্যাগটি গতিশীলভাবে sertোকানো যায়?


101

এটি কাজ করতে আমার সমস্যা হচ্ছে। আমি প্রথমে আমার স্ক্রিপ্ট ট্যাগগুলি স্ট্রিং হিসাবে সেট করার চেষ্টা করেছি এবং তারপরে পৃষ্ঠা লোডের পরে ডকুমেন্টে এগুলিকে যুক্ত করার জন্য jquery রিপ্লেসমউইথ () ব্যবহার করে:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

তবে আমি সেই ভারে স্ট্রিং আক্ষরিক ত্রুটি পেয়েছি। আমি তখন স্ট্রিংটিকে এনকোড করার চেষ্টা করেছি:

var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;';

কিন্তু replaceWith()ব্রাউজারে কেবল স্ট্রিংয়ের আউটপুটগুলিতে প্রেরণ ।

কেউ দয়া করে আমাকে কীভাবে জানাতে পারেন আপনি কীভাবে <script>পেজ লোডের পরে ব্রাউজারে আদর্শভাবে jQuery এর মাধ্যমে একটি ট্যাগ যুক্ত করতে যাবেন ?


আপনি <script>নথিতে একটি ট্যাগ যুক্ত করে এটি অর্জন করার চেষ্টা করছেন তা ব্যাখ্যা করতে পারেন ?
পয়েন্টটি

@ রকেটের উত্তরটি সেরা, তবে আপনি যদি অবশ্যই কোনও স্ট্রিং থেকে ইনলাইন স্ক্রিপ্ট যুক্ত করতে চান, তবে আপনি কেবল এটি eval()ফাংশনে পাস করবেন । তবে eval()প্রায়শই ব্যবহারের পরামর্শ দেয় যে আপনি যা করার চেষ্টা করছেন তার করার আরও ভাল উপায় আছে।
নিক

আমরা পৃষ্ঠার শেষ অবধি তৃতীয় পক্ষের বিজ্ঞাপনের লোডিং স্থগিত করার চেষ্টা করছি। এই বিজ্ঞাপনগুলিকে 2 স্ক্রিপ্ট ট্যাগের মাধ্যমে কল করা হয়, তাই আমি পৃষ্ঠা লোডের পরে এমন একটি ক্রিয়াকলাপ চালাতে চেয়েছিলাম যা এগুলিকে গতিশীলভাবে ফেলে দেয়।
ডগ 18

2
সমস্ত তৃতীয় পক্ষের স্ক্রিপ্টগুলি স্থগিত করার জন্য ডিজাইন করা হয়নি। স্ক্রিপ্টটি যদি ব্যবহার করে document.writeএবং আপনি পৃষ্ঠা লোড হওয়ার পরে এটি কল করেন তবে পৃষ্ঠাটি নষ্ট হয়ে যাবে।
বোবিনস

1
<iframe>উপাদানগুলিতে এই ট্যাগগুলি আমদানি করবেন না কেন ? আপনি <iframe>প্রস্তুত না হওয়া পর্যন্ত আপনি ইউআরএল সেটিংস স্থগিত করতে পারেন ।
পয়েন্টি

উত্তর:


103

আপনি স্ক্রিপ্টটিকে একটি পৃথক ফাইলে রাখতে পারেন, তারপরে $.getScriptএটি লোড এবং চালানোর জন্য ব্যবহার করুন ।

উদাহরণ:

$.getScript("test.js", function(){
    alert("Running test.js");
});

2
ধন্যবাদ, তবে এটি কি ডমকে আটকে দেবে? আমি বুঝতে পারি যে আমি সেই গুরুত্বপূর্ণ তথ্যটি রেখে গেছি, আমার স্ক্রিপ্ট ট্যাগটি ডিওমে sertedোকানো দরকার, মূল্যায়ন করা উচিত, যে সময়ে এটি একটি নির্দিষ্ট <div> তে আমাদের সাইটে প্রদর্শিত তৃতীয় পক্ষের বিজ্ঞাপন কোডটি দেয়।
ডগ 18

1
$.getScriptকেবলমাত্র AJAX এর মাধ্যমে একটি .js ফাইল লোড করবে এবং এটি সম্পাদন করবে। আপনার পৃষ্ঠায় একটি ডিভ অ্যাক্সেস করতে সক্ষম হওয়ার জন্য স্ক্রিপ্টটি ডোমে থাকা দরকার নেই।
রকেট হাজমাত

6
তবে $.getScript()স্ক্রিপ্টের সাথে একই ডোমেনে থাকা বা দূরবর্তী ডোমেন এবং ব্রাউজার উভয়েরই সমর্থন প্রয়োজন CORS
হিপ্পিট্রেইল

14
@ হিপ্পিটরেইল এটি আসলে সত্য নয়। এটি কেবল একটি সরল ওল 'স্ক্রিপ্ট ট্যাগ সন্নিবেশ করায়, যার জন্য সিওআর বা একই ডোমেনের প্রয়োজন নেই। আমি উদাহরণস্বরূপ গুগল অ্যানালিটিকাগুলি লোড করার জন্য কোডটি ছোট করার জন্য এটি ব্যবহার করি এবং এটি ঠিক জরিমানা করে। পর্দার আড়ালে আসল জ্যাকোয়ারি কোডটি আসলে জিএ স্নিপেটের সাথে বেশ মিল রয়েছে।
ক্রিস মোসচিনি

39
যেহেতু @hippietrail এর উত্তরটি তার 4 টি উপাখানের সাথে সবচেয়ে বেশি মনোযোগ আকর্ষণ করবে, তাই জোর দিয়ে স্পষ্ট করা উচিত যে তিনি ভুল ছিলেন is যেহেতু jQuery ডক্সগুলি তাদের $.ajaxনোটগুলিতে হাইলাইট করেছে : "স্ক্রিপ্ট এবং জেএসএনপি অনুরোধগুলি একই উত্স নীতি নিষেধাজ্ঞার বিষয় নয়।" উত্স । অন্য কথায়, $.getScriptকেবল নিজের নিজের নয়, অন্য ডোমেন থেকে .js ফাইলগুলি টানতে পারে
একাদশ

64

নিম্নলিখিত চেষ্টা করুন:

<script type="text/javascript">
// Use any event to append the code
$(document).ready(function() 
{
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://scriptlocation/das.js";
    // Use any selector
    $("head").append(s);
});

http://api.jquery.com/append


4
appendস্ক্রিপ্ট যোগ করার জন্য ব্যবহারের জন্য +1 । এমনকি তাত্ক্ষণিকভাবে ইনলাইন স্ক্রিপ্টটি মূল্যায়নের জন্য সংযোজন করে (কেবলমাত্র আমার যা প্রয়োজন)। ধন্যবাদ
কোডিং হয়ে গেছে

1
আমি এই পদ্ধতির সাথে IE8 / 9 এ প্রচুর সমস্যা পেয়েছি। যথা স্ট্যাক ওভারফ্লো ত্রুটি। বোর্ড জুড়ে এই কাজটি করার জন্য আমি নীচের get .getScript () পদ্ধতিটি অবলম্বন করেছি।
zmonteca

1
হ্যাঁ @ জ্যাকফল্যান্ড এটি অক্টোবর ২০১০ তে লেখা হয়েছিল :)
বাসেম

যদি এই কোড সম্বলিত পৃষ্ঠাটি এজেএক্স ব্যবহার করে লোড করা হয়, তবে ব্রাউজারটি "শেষ প্রান্তের অভিজ্ঞতার ক্ষতিকারক প্রভাবের কারণে" মূল থ্রেডের একটি সিঙ্ক্রোনাস এক্সএমএলএইচটিপিআরকেস্টকে অবহেলা করা হবে।
রাজশেকার রেড্ডি

রেডি গ্রেট মন্তব্য। এটি অক্টোবর ২০১০ এ পোস্ট করা হয়েছিল, আমি নিশ্চিত যে এখন অবধি এই পদ্ধতিটি আর বৈধ / প্রস্তাবিত পদ্ধতি নয়, ব্যবহারকারীদের তাদের নিজস্ব বিবেচনার ভিত্তিতে এগিয়ে যেতে হবে।
বাসেম

34

আধুনিক (2014) জিকুয়েরির সাথে এটি করার সঠিক উপায় এখানে রয়েছে:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .appendTo('head');
})

অথবা আপনি যদি সত্যিই কোনও ডিভি প্রতিস্থাপন করতে চান তবে আপনি করতে পারেন:

$(function () {
  $('<script>')
    .attr('type', 'text/javascript')
    .text('some script here')
    .replaceAll('#someelement');
});

3
অথবা পরিবর্তে। পাঠ্য ('এখানে কিছু স্ক্রিপ্ট') আপনি লিখতে পারেন .attr ('src', 'path_to_your_js_file')
Serhii Maksymchuk

11

একটি সহজ উপায় হ'ল:

$('head').append('<script type="text/javascript" src="your.js"></script>');

আপনি সিএসএস লোড করতে এই ফর্মটি ব্যবহার করতে পারেন।


6
আপনি স্ট্রিং নির্বাণ এড়িয়ে যেতে চাইতে পারেন </script>: যদিও যেহেতু এটি পার্সিং সমস্যার সৃষ্টি করতে পারে আপনার সোর্স মধ্যে stackoverflow.com/questions/236073/...
iX3

2
সর্বশেষে পালিয়ে যাওয়া /আমার জন্য কৌশলটি করেছে:$('head').append('<script src="your.js"><\/script>');
জেরিক

5

এই উত্তরটি প্রযুক্তিগতভাবে জ্যাকফল্যান্ডের জবাবগুলির সমান বা সমান। ইতিমধ্যে কোনও স্ক্রিপ্ট উপস্থিত রয়েছে কিনা তা সনাক্ত করার জন্য আমি কেবল একটি কোয়েরি যুক্ত করেছি। আমার এটি দরকার কারণ আমি বেশ কয়েকটি মডিউল নিয়ে একটি ইন্ট্রানেট ওয়েবসাইটে কাজ করি, যার মধ্যে কিছু স্ক্রিপ্টগুলি ভাগ করে নিচ্ছে বা তাদের নিজেরাই নিয়ে আসে, তবে এই স্ক্রিপ্টগুলি আবারও লোড করার প্রয়োজন হয় না। আমি এই স্নিপেটটি উত্পাদন পরিবেশে এক বছরেরও বেশি সময় থেকে ব্যবহার করছি, এটি একটি কবিতার মতো কাজ করে। নিজের কাছে মন্তব্য: হ্যাঁ আমি জানি, কোনও ফাংশন বিদ্যমান কিনা তা জিজ্ঞাসা করা আরও সঠিক হবে ... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}

BTW। স্টাইলশিটগুলি নিয়েও আমি একই কাজ করি: যদি (! $ ('মাথা> লিঙ্ক [href = "উইজেট / সিএসএস / উইজেটস CSS]]') দৈর্ঘ্য) {'(' মাথা ')) > ')। অ্যাটর (' রিল ',' স্টাইলশিট ')। অ্যাটর (' হ্রেফ ',' উইজেটস / সিএসএস / উইজেটস সিএসএস '))}
ডিড্লাব

2

এমন একটি কাজ রয়েছে যা হ্যাকের মতো শোনাচ্ছে এবং আমি সম্মত হই যে এটি করাটি সবচেয়ে মার্জিত উপায় নয়, তবে এটি 100% কাজ করে:

বলুন আপনার এজেএক্স প্রতিক্রিয়া এমন কিছু

<b>some html</b>
<script>alert("and some javscript")

মনে রাখবেন যে আমি উদ্দেশ্যটি করে ক্লোজিং ট্যাগটি এড়িয়ে গেছি। তারপরে উপরের অংশটি বোঝায় যে স্ক্রিপ্টে, নিম্নলিখিতটি করুন:

$.ajax({
    url: "path/to/return/the-above-js+html.php",
    success: function(newhtml){
        newhtml += "<";
        newhtml += "/script>";
        $("head").append(newhtml);
    }
});

কেবল আমাকে কেন জিজ্ঞাসা করবেন না :-) হতাশ প্রায় এলোমেলো পরীক্ষার এবং ব্যর্থতার ফলস্বরূপ আমি এগুলির মধ্যে এসেছি।

এটি কীভাবে কাজ করে সে সম্পর্কে আমার কাছে সম্পূর্ণ পরামর্শ নেই, তবে আকর্ষণীয়ভাবে যথেষ্ট, আপনি যদি এক লাইনে ক্লোজিং ট্যাগ সংযোজন করেন তবে এটি কাজ করবে না।

এ জাতীয় সময়ে, আমার মনে হয় আমি সফলভাবে শূন্য দ্বারা ভাগ করেছি।


3
ক্লোজিং স্ক্রিপ্ট ট্যাগটি যদি এক টুকরোতে থাকে তবে এটি কাজ করবে না কারণ ব্রাউজারটি স্ট্রিং আক্ষরিক পরিবর্তে আপনার স্ক্রিপ্টের জন্য ক্লোজিং ট্যাগ হিসাবে দেখে।
কোডিং হয়ে গেছে

1
<\/script>যদিও বৈধ হবে
এসপি

আমি মনে করি @ ট্রু ব্লুউউসির বক্তব্যটি আপনার মন্তব্যের প্রতিক্রিয়া হিসাবে ছিল "" আমাকে কেন জিজ্ঞাসা করবেন না ... তবে মজার বিষয় হচ্ছে, আপনি যদি এক লাইনে ক্লোজিং ট্যাগ সংযোজন করেন তবে এটি কার্যকর হবে না। " তিনি কেন ব্যাখ্যা করেছিলেন যাতে যে কোনও পাঠকই "আমি জানি না" এর চেয়ে আরও ভাল উত্তর চাই তারা আরও সহজে এটি খুঁজে পেতে পারে। আরও দেখুন: javascript.crockford.com/script.html
iX3

1
এই লিঙ্ক অনুসারে @ সাথভিক সঠিক। অ্যাশের মন্তব্যটি মুছে ফেলা একটির জবাব বলে মনে হচ্ছে।
অ্যারলেন বেলার ২

2

উদাহরণ:

var a = '<script type="text/javascript">some script here</script>';
$('#someelement').replaceWith(a);

এটি কাজ করা উচিত. আমি এটা চেষ্টা করেছি; একই ফলাফল। তবে আমি যখন এটি ব্যবহার করেছি:

var length = 1;
var html = "";
for (var i = 0; i < length; i++) {
    html += '<div id="codeSnippet"></div>';
    html += '<script type="text/javascript">';
    html += 'your script here';
    html += '</script>';
}
$('#someElement').replaceWith(a);

এটি আমার পক্ষে কাজ করেছে।

সম্পাদনা: আমি #someelement(বিটিডব্লিউ আমি #someElementসম্মেলনের কারণে ব্যবহার করতে চাই ) ভুলে গেছি

এখানে সর্বাধিক গুরুত্বপূর্ণ বিষয়টি হ'ল + = তাই এইচটিএমএল যোগ করা হয়েছে এবং প্রতিস্থাপন করা হয়নি।

যদি এটি কাজ না করে তবে একটি মন্তব্য দিন। আমি আপনাকে সাহায্য করতে চাই!


2

এখানে একটি আরও পরিষ্কার উপায় - jQuery প্রয়োজন নেই - যা এর শেষ সন্তানের হিসাবে একটি স্ক্রিপ্ট যুক্ত করে <body>:

document.body.innerHTML +='<script src="mycdn.js"><\/script>'

কিন্তু আপনি করতে চান তাহলে যোগ এবং লোড স্ক্রিপ্ট ব্যবহার রকেট Hazmat এর পদ্ধতি


-4

আপনি যদি কিছু গতিশীলভাবে উত্পন্ন জাভাস্ক্রিপ্ট চালানোর চেষ্টা করছেন তবে আপনি ব্যবহার করে কিছুটা ভাল হবেন eval। তবে জাভাস্ক্রিপ্ট এমন একটি গতিশীল ভাষা যা আপনার সত্যই এর প্রয়োজন হবে না।

যদি স্ক্রিপ্ট স্থিতিশীল হয়, তবে রকেটের- getScriptপরামর্শটিই উপায়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.