javascript - jquery w3schools




<স্ক্রিপ্ট> উপাদান যোগ করা যাবে না (12)

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

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

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


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

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

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

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


আমি একই জিনিস করতে চাই কিন্তু অন্য ফ্রেমে স্ক্রিপ্ট ট্যাগ যুক্ত করতে চাই!

var url = 'library.js'; 
var script = window.parent.frames[1].document.createElement('script' ); 
script.type = 'text/javascript'; 
script.src = url;
$('head',window.parent.frames[1].document).append(script);

আমি একটি 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


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

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); })();

এই পৃষ্ঠায় উল্লিখিত স্ক্রিপ্ট ফাইলে sourceURL যোগ করা হয়েছে: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

  1. স্ক্রিপ্ট ফাইলে, sourceURL এর সাথে একটি বিবৃতি যুক্ত করুন যেমন "// @ sourceURL = foo.js"
  2. JQuery $ .getScript () ব্যবহার করে স্ক্রিপ্ট লোড করুন এবং স্ক্রিপ্ট Chrome dev সরঞ্জামগুলিতে "উত্স" ট্যাবে উপলব্ধ হবে

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

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

এইটা কাজ করে:

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

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


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

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

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

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

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


স্ক্রিপ্ট 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 মধ্যে আবৃত করা প্রয়োজন হয় না, কিন্তু এটি করার ফলে আপনি স্ক্রিপ্ট লোড যখন প্রতিশ্রুতি সমাধান করতে পারবেন, দীর্ঘ চলমান স্ক্রিপ্ট জন্য জাতি শর্ত প্রতিরোধ করতে সাহায্য করে।


ভাল খবর হল:

এটা 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