javascript jquery - <স্ক্রিপ্ট>উপাদান যোগ করা যাবে না




w3schools ui (16)

এই সহায়ক হতে পারে চেষ্টা করুন:

var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);

কোনও ধারণা কেন নীচের কোডটি স্ক্রিপ্ট উপাদানটিকে DOM এ যুক্ত করে না?

var code = "<script></script>";
$("#someElement").append(code);

আমি এমন কিছু বিষয় দেখেছি যেখানে কিছু ব্রাউজার আপনাকে সরাসরি সেগুলি করার সময় কিছু পরিবর্তনকে সম্মান করে না (যার মাধ্যমে আমি আপনার লেখাটি থেকে এইচটিএমএল তৈরি করতে চাই, যেমন আপনি স্ক্রিপ্ট ট্যাগ দিয়ে চেষ্টা করছেন), কিন্তু যখন আপনি বিল্ট ইন কমান্ডগুলি করেন জিনিষ ভাল যেতে। এটা চেষ্টা কর:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

থেকে: jQuery জন্য JSON


শুধু jQuery সঙ্গে এটি পার্সিং দ্বারা একটি উপাদান তৈরি করুন।

<div id="someElement"></div>
<script>
    var code = "<script>alert(123);<\/script>";
    $("#someElement").append($(code));
</script>

কাজের উদাহরণ: https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz


আপনি কি "কাজ না" মানে?

jQuery সনাক্ত করে যে আপনি একটি SCRIPT উপাদান তৈরি করার চেষ্টা করছেন এবং স্বয়ংক্রিয়ভাবে বিশ্বব্যাপী প্রসঙ্গের মধ্যে উপাদানটির সামগ্রী চালানো হবে। আপনি কি আমাকে বলছেন যে এটি আপনার জন্য কাজ করে না? -

$('#someElement').append('<script>alert("WORKING");</script>');

সম্পাদনা করুন: যদি আপনি কমান্ডটি চালানোর পরে DOM (উদাহরণস্বরূপ ফায়ারবাগে) তে SCRIPT উপাদানটি দেখেন না তবে এটি যেহেতু আমি বলেছি যে jQuery, যেমন আমি বলেছিলাম কোডটি চালানো হবে এবং তারপর SCRIPT উপাদান মুছে ফেলবে - আমি বিশ্বাস করি যে SCRIPT উপাদানগুলি সবসময় শরীরের মধ্যে সংযুক্ত করা হয় ... যাই হোক না কেন - বসানো এই পরিস্থিতিতে কোড নির্বাহ উপর একেবারে কোন ভারবহন আছে।


স্ক্রিপ্ট DOM Element তৈরি করার জন্য আপনাকে jQuery প্রয়োজন নেই। এটি ভ্যানিলা ES6 এর সাথে সম্পন্ন করা যেতে পারে:

const script = "console.log('Did it work?')"
new Promise((resolve, reject) => {
  (function(i,s,o,g,r,a,m){
      a=s.createElement(o),m=s.getElementsByTagName(o)[0];
      a.innerText=g;
      a.onload=r;m.parentNode.insertBefore(a,m)}
  )(window,document,'script',script, resolve())
}).then(() => console.log('Sure did!'))

এটি একটি Promise মধ্যে আবৃত করা প্রয়োজন হয় না, কিন্তু এটি করার ফলে আপনি স্ক্রিপ্ট লোড যখন প্রতিশ্রুতি সমাধান করতে পারবেন, দীর্ঘ চলমান স্ক্রিপ্ট জন্য জাতি শর্ত প্রতিরোধ করতে সাহায্য করে।


আমি এই one চেষ্টা এবং জরিমানা কাজ করে। শুধু < \x3C দিয়ে < চিহ্নটি প্রতিস্থাপন করুন।

// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);

অথবা

//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");

আপনি here কোড পরীক্ষা করতে পারেন।


আমি একটি npm প্যাকেজ লিখেছি যা আপনাকে স্ক্রিপ্ট ট্যাগ সহ একটি HTML স্ট্রিং, এবং এটি একটি ধারক এ সংযুক্ত করতে দেয়।

উদাহরণ:

import appendHtml from 'appendhtml';

const html = '<p>Hello</p><script src="some_js_file.js"></script>'; 
const container = document.getElementById('some-div');

await appendHtml(html, container);

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

এখানে এটি খুঁজুন: https://www.npmjs.com/package/appendhtml


ভাল খবর হল:

এটা 100% কাজ করছে।

শুধু alert('voila!'); হিসাবে স্ক্রিপ্ট ট্যাগের মধ্যে কিছু যোগ করুন alert('voila!'); । সঠিক প্রশ্নটি সম্ভবত আপনি চাইতে চাইতে পারেন, "কেন আমি এটি DOM তে দেখিনি?"

কার্ল সুইডেনবার্গের jQuery এপিআই সাইটের ভিজিটরের মন্তব্যের জন্য একটি সুন্দর ব্যাখ্যা করেছেন। আমি তার সমস্ত শব্দ পুনরাবৃত্তি করতে চাই না , আপনি এখানে সরাসরি পড়তে পারেন (সেখানে মন্তব্যগুলির মাধ্যমে নেভিগেট করা কঠিন ছিল)

JQuery এর সন্নিবেশ পদ্ধতিগুলি ডমিতে সন্নিবেশিত হওয়ার আগে এবং পরে উপাদানগুলিকে পরিষ্কার / প্রক্রিয়া করার জন্য অভ্যন্তরীণভাবে একটি ডোমম্যানম ফাংশন ব্যবহার করে। ডোমম্যানিপ ফাংশনটি যে জিনিসগুলির মধ্যে রয়েছে সেগুলি যে কোনও স্ক্রিপ্ট উপাদান সন্নিবেশ করানো হয় এবং এটি "ইভলস্ক্রিপ্ট রুটিন" মাধ্যমে চালানো হয় যা বাকি DOM ফ্যাগমেন্টের সাথে ইনজেকশন করার পরিবর্তে চালানো হয়। এটি পৃথকভাবে স্ক্রিপ্টগুলিকে সন্নিবেশ করায়, মূল্যায়ন করে এবং তারপর তাদের DOM থেকে সরিয়ে দেয়।

আমি বিশ্বাস করি যে jQuery এর কারণগুলির মধ্যে একটি হল "অনুমতি অস্বীকার করা" ত্রুটিগুলিকে এড়ানোর জন্য যা ইন্টারনেট এক্সপ্লোরারে ঘটতে পারে যখন নির্দিষ্ট পরিস্থিতিতে স্ক্রিপ্ট সন্নিবেশ করা হয়। এটি একই স্ক্রিপ্টটিকে বার বার সন্নিবেশ / মূল্যায়ন করতে বাধা দেয় (যা সম্ভাব্য সমস্যার কারণ হতে পারে) যদি এটি কোনও উপাদানযুক্ত উপাদানটির মধ্যে থাকে এবং আপনি DOM এর চারপাশে চলে যান।

পরবর্তী জিনিস হল, আমি একটি স্ক্রিপ্ট যোগ করার জন্য .append() ফাংশন ব্যবহার করে খারাপ খবর কি সংক্ষেপে করব।

এবং খারাপ খবর ..

আপনি আপনার কোড ডিবাগ করতে পারবেন না।

আমি মজা করছি না, এমনকি আপনি debugger; যুক্ত করলেও debugger; আপনি যে লাইনটি ব্রেকপয়েন্ট হিসাবে সেট করতে চান তার মধ্যে কীওয়ার্ড, আপনি সোর্স কোডের ব্রেকপয়েন্ট দেখে কেবল বস্তুর কল স্ট্যাকটি পেয়ে যাবেন, (এই শব্দটি কেবল ওয়েবকিট ব্রাউজারে কাজ করে, অন্য সমস্ত প্রধান ব্রাউজার এই শব্দটি বাদ দিতে মনে হয়)

আপনার কোডটি কীভাবে সম্পূর্ণরূপে বুঝতে পারে তা হলে, এটি একটি ক্ষুদ্র ক্ষতির কারণ হবে। কিন্তু আপনি যদি না করেন, আপনি একটি debugger; যোগ শেষ হবে debugger; আপনার (অথবা আমার) কোডের সাথে কী ভুল তা খুঁজে বের করতে শুধুমাত্র সমস্ত জায়গাতেই কীওয়ার্ড। যাইহোক, একটি বিকল্প আছে, জাভাস্ক্রিপ্ট নেটিভভাবে এইচটিএমএল DOM ম্যানিপুলেশন করতে পারেন ভুলবেন না।

কার্যসংক্রান্ত।

এইচটিএমএল DOM ম্যানিপুলেট জাভাস্ক্রিপ্ট (jQuery নয়) ব্যবহার করুন

আপনি ডিবাগিংয়ের ক্ষমতা হারাতে চাইলে, আপনি জাভাস্ক্রিপ্ট নেটিভ এইচটিএমএল DOM ম্যানিপুলেশন ব্যবহার করতে পারেন। এই উদাহরণ বিবেচনা করুন:

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert('voila!');"               // use this for inline script
document.body.appendChild(script);

এটা ঠিক আছে, পুরানো দিনের মতোই নয়। এবং DOM বা মেমরির যে সমস্ত বস্তু উল্লেখ করা হয়েছে এবং মেমরি লিকগুলি প্রতিরোধ করার জন্য আর প্রয়োজন নেই সে বিষয়ে জিনিসগুলি পরিষ্কার করতে ভুলবেন না। আপনি বিষয়গুলি পরিষ্কার করতে এই কোডটি বিবেচনা করতে পারেন:

document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.

এই কার্যকারিতা থেকে ত্রুটিটি হ'ল আপনি দুর্ঘটনাক্রমে একটি সদৃশ স্ক্রিপ্ট যুক্ত করতে পারেন এবং এটি খারাপ। এখান থেকে আপনি যোগ করার আগে একটি বস্তু যাচাইকরণ যোগ করে, এবং এটি যোগ করার পরে ডম থেকে স্ক্রিপ্টটি সরানোর মাধ্যমে সামান্য অনুকরণ করতে পারেন .append() ফাংশনটি। এই উদাহরণ বিবেচনা করুন:

function AddScript(url, object){
    if (object != null){
        // add script
        var script   = document.createElement("script");
        script.type  = "text/javascript";
        script.src   = "path/to/your/javascript.js";
        document.body.appendChild(script);

        // remove from the dom
        document.body.removeChild(document.body.lastChild);
        return true;
    } else {
        return false;
    };
};

function DeleteObject(UnusedReferencedObjects) {
    delete UnusedReferencedObjects;
}

এই ভাবে, আপনি স্ক্রিপ্ট সদৃশ থেকে নিরাপদ থাকা অবস্থায় ডিবাগিংয়ের ক্ষমতা সহ স্ক্রিপ্ট যোগ করতে পারেন। এটি কেবল একটি প্রোটোটাইপ, আপনি যা চান তা বিস্তৃত করতে পারেন। আমি এই পদ্ধতির ব্যবহার এবং এই সঙ্গে বেশ সন্তুষ্ট হয়েছে। নিশ্চিত যে আমি একটি স্ক্রিপ্ট যোগ করার জন্য jQuery .append() ব্যবহার করব না।


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

$.getScript('http://www.whatever.com/shareprice/shareprice.js', function() {
  Display.sharePrice();
});

এখন বহিরাগত স্ক্রিপ্ট বলা হবে, এবং এটি লোড করা যাবে না, এটা চিত্তাকর্ষকভাবে হতাশ হবে।


শরীরের স্ক্রিপ্ট যোগ করুন:

$(document).ready(function() {
    $("<script>", {  src : "bootstrap.min.js",  type : "text/javascript" }).appendTo("body");
});

এই মত চেষ্টা করতে পারেন

var code = "<script></" + "script>";
$("#someElement").append(code);

একমাত্র কারণ আপনি "<script></script>" করতে পারবেন না কারণ স্ট্রিংটি জাভাস্ক্রিপ্টের ভিতরে অনুমোদিত নয় কারণ DOM স্তরটি কোনটি js এবং HTML কী তা বিশ্লেষণ করতে পারে না।


এইটা কাজ করে:

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

মনে হচ্ছে jQuery জাগ্রত কিছু স্ক্রিপ্ট দিয়ে কাজ করছে তাই আপনাকে jQuery বস্তুর পরিবর্তে HTML উপাদান যুক্ত করতে হবে।


আপনার স্ক্রিপ্ট নির্বাহ করা হচ্ছে, আপনি শুধু document.write ব্যবহার করতে পারবেন না। এটি থেকে লিখুন। এটি পরীক্ষা করে এবং document.write ব্যবহার এড়াতে একটি সতর্কতা ব্যবহার করুন। Document.write এর সাথে আপনার জেএস ফাইলের বিবৃতি নির্বাহ করা হবে না এবং বাকি ফাংশনটি কার্যকর করা হবে।


<script>
    ...
    ...jQuery("<script></script>")...
    ...
</script>

</script> স্ট্রিং "</scr" + "ipt>" মধ্যে সমগ্র স্ক্রিপ্টটি বন্ধ করে দেয়, "</scr" + "ipt>" এড়াতে "</scr" + "ipt>" পরিবর্তে ব্যবহার করা যেতে পারে।


এই আমি সবচেয়ে ভাল সমাধান মনে হয়। গুগল এনালিটিক্স এই ভাবে ইনজেকশনের হয়।

var (function(){
    var p="https:" == document.location.protocol ? "https://" : "http://";
        d=document,
        g=d.createElement('script'),
        s=d.getElementsByTagName('script')[0];
        g.type='text/javascript';
        g.src=p+'url-to-your-script.js';
        s.parentNode.insertBefore(g,s); })();

ব্যবহারকারীর বাইরে ক্লিক করলে মেনুটি বন্ধ করার জন্য আপনাকে যা দরকার তা আমি মনে করি না; ব্যবহারকারীর পৃষ্ঠার যেকোনো জায়গায় ক্লিক করার সময় মেনুটি বন্ধ করার জন্য আপনার যা দরকার। আপনি যদি মেনুতে ক্লিক করেন, অথবা মেনু বন্ধ করেন তবে এটি বন্ধ করা উচিত?

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

  1. আপনি যদি ক্লিকের সময়ে শরীরের উপাদানতে একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করেন তবে মেনুটি বন্ধ করার আগে দ্বিতীয় ক্লিকের জন্য অপেক্ষা করুন এবং ইভেন্টটিকে আনবিন্ড করা নিশ্চিত করুন। অন্যথায় মেনুটি খোলে এমন ক্লিক ইভেন্টটি শ্রোতাটিকে বুদ্বুদ করবে যা মেনু বন্ধ করতে হবে।
  2. আপনি যদি কোনো ইভেন্ট ইভেন্টে event.stopPropogation () ব্যবহার করেন তবে আপনার পৃষ্ঠার অন্য কোন উপাদানগুলিতে ক্লিক-কো-কো-টু-ক্লোজ বৈশিষ্ট্য থাকতে পারে না।
  3. অনির্দিষ্টকালের জন্য শরীরের উপাদানতে একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করা একটি পারফরম্যান্স সমাধান নয়
  4. ঘটনাটির লক্ষ্যের তুলনা করে এবং তার বাবা-মা হ্যান্ডলারের নির্মাতার কাছে অনুমান করে যে আপনি যা চান তা মেনুটি বন্ধ করার সময় এটি বন্ধ করা হয়, যখন আপনি পৃষ্ঠাটি যে কোনও জায়গায় ক্লিক করেন তখন আপনি যা চান তা বন্ধ করতে হয়।
  5. শরীরের উপাদান ইভেন্টের জন্য শোনার আপনার কোড আরো ভঙ্গুর করা হবে। এই হিসাবে নির্দোষ হিসাবে স্টাইলিং এটি বিরতি হবে: body { margin-left:auto; margin-right: auto; width:960px;} body { margin-left:auto; margin-right: auto; width:960px;}






javascript jquery