"সামগ্রী" নামে একটি ডিভ রয়েছে:
<div id="content"></div>
এটি একটি <script>ট্যাগ সহ এজেএক্স দ্বারা কোনও পিএইচপি ফাইলের ডেটা দিয়ে পূরণ করা উচিত । তবে এই ট্যাগের স্ক্রিপ্টটি কার্যকর করা হচ্ছে না।
<div id="content"><!-- After AJAX loads the stuff that goes here -->
<script type="text/javascript">
//code
</script>
<!-- More stuff that DOES work here -->
</div>
window.onloadআমি XMTHttpRequestঅন্য একটি (পিএইচপি) পৃষ্ঠার অনুরোধ করার জন্য একটি বস্তু তৈরি করার পরে যা স্ক্রিপ্ট সহ ডিভের সামগ্রী অন্তর্ভুক্ত করে। আমি এটি সরল জেএস দিয়ে করছি, কোন লাইব্রেরি নেই (আমার নিজস্ব
উত্তর:
DOM পাঠ্য হিসাবে প্রবেশ করা জাভাস্ক্রিপ্ট কার্যকর হবে না। তবে আপনি আপনার লক্ষ্যটি সম্পাদন করতে গতিশীল স্ক্রিপ্ট প্যাটার্নটি ব্যবহার করতে পারেন । মূল ধারণাটি হ'ল যে স্ক্রিপ্টটি আপনি একটি বাহ্যিক ফাইলের মধ্যে চালিত করতে চান এবং যখন আপনি আপনার অ্যাজাক্স প্রতিক্রিয়া পান তখন একটি স্ক্রিপ্ট ট্যাগ তৈরি করতে চান। তারপরে আপনি srcআপনার স্ক্রিপ্ট ট্যাগ এবং ভয়েলার বৈশিষ্ট্যটি সেট করে , এটি বাহ্যিক স্ক্রিপ্ট লোড করে এবং কার্যকর করে।
এই অন্যান্য স্ট্যাকওভারফ্লো পোস্টটি আপনার পক্ষে সহায়ক হতে পারে: স্ক্রিপ্টগুলি কী অভ্যন্তর এইচটিএমএল দিয়ে সন্নিবেশ করা যেতে পারে? ।
$('#audit-view script').each(function (index, element) { eval(element.innerHTML); })
আমি এই কোডটি ব্যবহার করেছি, এটি ভাল কাজ করছে
var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML)//run script inside div
আপনি যদি এইজ্যাকের মাধ্যমে আপনার ডিভের মধ্যে কোনও স্ক্রিপ্ট ব্লক লোড করেন:
<div id="content">
<script type="text/javascript">
function myFunction() {
//do something
}
myFunction();
</script>
</div>
... এটি কেবল আপনার পৃষ্ঠার DOM আপডেট করে, আমার ফাংশন () অগত্যা কল করা হবে না।
অনুরোধটি শেষ হলে কী সম্পাদন করতে হবে তা নির্ধারণ করতে আপনি jQuery এর এজাক্স () পদ্ধতির মতো একটি অ্যাজাক্স কলব্যাক পদ্ধতি ব্যবহার করতে পারেন ।
আপনি যা করছেন তা জাভাস্ক্রিপ্টের সাথে কোনও পৃষ্ঠা এতে লোভ করা থেকে আলাদা যা গেট-গো (যা কার্যকর হয়) থেকে অন্তর্ভুক্ত।
কিছু সামগ্রী আনার পরে কীভাবে সাফল্য কলব্যাক এবং ত্রুটি কলব্যাক ব্যবহার করা যায় তার একটি উদাহরণ:
$.ajax({
type: 'GET',
url: 'response.php',
timeout: 2000,
success: function(data) {
$("#content").html(data);
myFunction();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("error retrieving content");
}
আর একটি দ্রুত এবং নোংরা উপায় হ'ল আপনি jQuery বা অন্যান্য লাইব্রেরি ব্যবহার করতে না চাইলে আপনি যে কোনও স্ক্রিপ্ট কোডটি DOM পাঠ্য হিসাবে সন্নিবেশ করিয়েছেন তা কার্যকর করতে ওয়াল () ব্যবহার করুন।
এখানে স্ক্রিপ্টটি পাঠ্যের সমস্ত স্ক্রিপ্ট ট্যাগকে মূল্যায়ন করবে।
function evalJSFromHtml(html) {
var newElement = document.createElement('div');
newElement.innerHTML = html;
var scripts = newElement.getElementsByTagName("script");
for (var i = 0; i < scripts.length; ++i) {
var script = scripts[i];
eval(script.innerHTML);
}
}
আপনি সার্ভার থেকে আপনার এইচটিএমএল পাওয়ার পরে এই ফাংশনটি কল করুন। সতর্কতা অবলম্বন করুন: ব্যবহার evalকরা বিপজ্জনক হতে পারে।
এটি jQuery ব্যবহার করে আমার জন্য 'কেবলমাত্র কাজ করে', তবে আপনি যদি ডকুমেন্টে এক্সএইচআর-ফিরিয়ে দেওয়া এইচটিএমএল সংযুক্ত করার চেষ্টা না করেন provided ( এই বাগের প্রতিবেদনটি jQuery নিয়ে সমস্যা দেখায় দেখুন ))
এখানে এটি কাজ করে দেখানোর একটি উদাহরণ রয়েছে:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test_1.4</title>
<script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script>
<script type="text/javascript" charset="utf-8">
var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
"$('#a').html('Hooray! JS ran!');" +
"<\/script><\/div>";
$(function(){
$('#replaceable').replaceWith($(snippet));
});
</script>
</head>
<body>
<div id="replaceable">I'm going away.</div>
</body>
</html>
এখানে উপরের সমতুল্য: http://jsfiddle.net/2CTLH/
আপনি এজেএক্স প্রতিক্রিয়াগুলি পার্স করতে এখানে একটি ফাংশনটি ব্যবহার করতে পারেন, বিশেষত যদি আপনি মিনিফিড ব্যবহার করেন এবং এটি ফিরে আসা জাভাস্ক্রিপ্ট সম্পাদন করতে চান বা স্ক্রিপ্টগুলি ডিওমে যোগ না করে পার্স করতে চান, এটি ব্যতিক্রম ত্রুটিগুলিও পরিচালনা করে। আমি এই কোডটি পিএইচপিএসস্যাক লাইব্রেরিতে ব্যবহার করেছি এবং এটি লাইব্রেরির বাইরে দরকারী।
function parseScript(_source) {
var source = _source;
var scripts = new Array();
// Strip out tags
while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
var s = source.toLowerCase().indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.toLowerCase().indexOf("</script", s);
var e_e = source.indexOf(">", e);
// Add to scripts array
scripts.push(source.substring(s_e+1, e));
// Strip from source
source = source.substring(0, s) + source.substring(e_e+1);
}
// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
if (scripts[i] != '')
{
try { //IE
execScript(scripts[i]);
}
catch(ex) //Firefox
{
window.eval(scripts[i]);
}
}
}
catch(e) {
// do what you want here when a script fails
// window.alert('Script failed to run - '+scripts[i]);
if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]);
}
}
// Return the cleaned source
return source;
}
আপনি যদি স্ক্রিপ্ট ট্যাগের প্রয়োজন এমন কোনও কিছু ইনজেকশন দিচ্ছেন তবে আপনি একটি অবিরত সিনট্যাক্স ত্রুটি পেতে পারেন এবং অবৈধ টোকেন বলতে পারেন । এটি এড়াতে, আপনার সমাপনী স্ক্রিপ্ট ট্যাগ (গুলি) -এর ফরোয়ার্ড স্ল্যাশগুলি এড়িয়ে যাওয়ার বিষয়ে নিশ্চিত হন। অর্থাত্;
var output += '<\/script>';
ফর্ম ট্যাগের মতো কোনও ক্লোজিং ট্যাগের ক্ষেত্রেও একই কাজ।
এটি অজ্যাক্স থেকে প্রতিটি স্ক্রিপ্টের সামগ্রীতে আবল কল করে আমার পক্ষে কাজ করেছে oneডোন:
$.ajax({}).done(function (data) {
$('div#content script').each(function (index, element) { eval(element.innerHTML);
})
দ্রষ্টব্য: আমি aj .Jax এ প্যারামিটারগুলি লিখিনি যা আপনাকে আপনার এজাক্স অনুসারে সামঞ্জস্য করতে হবে।
আমার এখানে একটি অবিস্মরণীয় পোস্ট ছিল, অ্যাজেন্টভেলস্টনার লোড অ্যাজ্যাক্স লোডে jquery ব্যতীত
আমি কীভাবে সমাধান করেছি তা আমার স্টেট চেঞ্জ ফাংশনের মধ্যে ফাংশনে কল sertোকানো ছিল। আমার সেটআপ করা পৃষ্ঠাটি ছিল 3 টি বোতাম যা কন্টেন্টআরিয়ায় 3 টি পৃথক পৃষ্ঠা লোড করবে। পৃষ্ঠা 1, 2 বা 3 লোড করার জন্য কোন বোতামটি টিপ করা হচ্ছে তা আমি জানতে পেরেছিলাম, কোন পৃষ্ঠাটি লোড হচ্ছে এবং তারপরে কোন ফাংশনটি চালানো হবে তা নির্ধারণ করার জন্য / অন্য বিবৃতিগুলি আমি সহজেই ব্যবহার করতে পারি। আমি যা করার চেষ্টা করছিলাম তা ছিল বিভিন্ন বোতাম শ্রোতার নিবন্ধন যা কেবলমাত্র যখন আইডিটির কারণে নির্দিষ্ট পৃষ্ঠাটি লোড করা হত তখনই কাজ করবে ..
তাই ...
যদি (পৃষ্ঠা 1 লোড হচ্ছে, পৃষ্ঠালোড = 1) ফাংশন রেজিস্টারলিস্টেনার 1 চালান run
তারপরে পৃষ্ঠা 2 বা 3 এর জন্য একই।
আমার উপসংহার এইচটিএমএল নিস্টেড স্ক্রিপ্ট ট্যাগগুলির অনুমতি দেয় না। আপনি যদি এইচটিএমএল কোডটি ইনজেকশনের জন্য জাভাস্ক্রিপ্ট ব্যবহার করে থাকেন যা ভিতরে স্ক্রিপ্ট ট্যাগগুলি অন্তর্ভুক্ত করে কাজ করছে না কারণ জাভাস্ক্রিপ্টটি কোনও স্ক্রিপ্ট ট্যাগেও যায়। আপনি এটি পরবর্তী কোড দিয়ে পরীক্ষা করতে পারেন এবং আপনি হবেন যে এটি কার্যকর হচ্ছে না। ব্যবহারের ক্ষেত্রে হ'ল আপনি এজেএক্স বা অনুরূপ কোনও পরিষেবা কল করছেন, আপনি এইচটিএমএল পাচ্ছেন এবং আপনি সরাসরি এইচটিএমএল ডিওমে ইনজেক্ট করতে চান। যদি ইনজেক্টেড এইচটিএমএল কোডটিতে স্ক্রিপ্টের ভিতরে থাকে তবে ট্যাগগুলি কার্যকর হবে না।
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body></body><script>document.getElementsByTagName("body")[0].innerHTML = "<script>console.log('hi there')</script>\n<div>hello world</div>\n"</script></html>
আর একটি জিনিস করণীয় হ'ল পৃষ্ঠাটি কোনও স্ক্রিপ্টের সাথে লোড করা যেমন:
<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
//do something
}
myFunction();
</script>
</div>
এটি পৃষ্ঠাটি লোড করবে, স্ক্রিপ্টটি চালাবে এবং ফাংশনটি চালু হওয়ার পরে ইভেন্ট হ্যান্ডলারটি সরিয়ে ফেলবে। এটি একটি অজ্যাক্স লোডের পরে অবিলম্বে চলবে না, তবে আপনি যদি ব্যবহারকারীটি ডিভ উপাদানটিতে প্রবেশের অপেক্ষায় থাকেন তবে এটি ঠিক কাজ করবে।
পুনশ্চ. Jquery প্রয়োজন