অভ্যন্তরীণ এইচটিএমএল দিয়ে স্ক্রিপ্টগুলি sertedোকানো যাবে?

223

আমি এ ব্যবহার innerHTMLকরে কোনও পৃষ্ঠায় কিছু স্ক্রিপ্ট লোড করার চেষ্টা করেছি <div>। এটি প্রদর্শিত হয় যে স্ক্রিপ্টটি ডোমটিতে লোড হয় তবে এটি কখনও কার্যকর হয় না (কমপক্ষে ফায়ারফক্স এবং ক্রোমে)। স্ক্রিপ্টগুলি সন্নিবেশ করার সময় সেগুলি কার্যকর করার কোনও উপায় আছে innerHTML?

কোডের উদাহরণ:

<!DOCTYPE html>
<html>
  <body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
    Shouldn't an alert saying 'hi' appear?
    <div id="loader"></div>
  </body>
</html>
স্নিপেট প্রসারিত করুন

javascript  html  dom  innerhtml 
— ক্রেইগ
সূত্র

উত্তর:

88

আপনি ডিওএম পাঠ্য হিসাবে সন্নিবেশ করা যে কোনও স্ক্রিপ্ট কোড কার্যকর করতে আপনাকে ইওল () ব্যবহার করতে হবে ।

MooTools স্বয়ংক্রিয়ভাবে আপনার জন্য এটি করবে, এবং আমি নিশ্চিত যে jQuery পাশাপাশি করবে (সংস্করণ উপর নির্ভর করে। JQuery সংস্করণ 1.6+ ব্যবহার করে eval)। এটি <script>ট্যাগগুলি ছড়িয়ে দেওয়া এবং আপনার সামগ্রী থেকে বেরিয়ে আসা এবং সেইসাথে অন্যান্য "গোটচাস" এর প্রচুর ঝামেলা বাঁচায় ।

সাধারণত আপনি eval()নিজেই যদি এটিতে যান তবে আপনি কোনও HTML চিহ্নআপ ছাড়াই স্ক্রিপ্ট কোডটি তৈরি করতে / প্রেরণ করতে চান <script>যেমন এগুলি eval()সঠিকভাবে কার্যকর হবে না ।

— zombat
সূত্র
12
আমি সত্যিই যা করতে চাই তা হ'ল কোনও বাহ্যিক স্ক্রিপ্ট লোড করা, কেবল কিছু স্থানীয় স্ক্রিপ্টই নয়। স্ক্রিপ্ট ট্যাগের সাথে অন্তর্নিহিত এইচটিএমএল যুক্ত করা একটি স্ক্রিপ্ট ডিওএম উপাদান তৈরি করা এবং এটি শরীরে যুক্ত করার চেয়ে খুব ছোট and এবং আমি আমার কোডটি যতটা সম্ভব সংক্ষিপ্ত করে দেওয়ার চেষ্টা করছি। আপনাকে কি অভ্যন্তরীণ এইচটিএমএল এর মতো কিছু ব্যবহার না করে ডোম স্ক্রিপ্ট উপাদান তৈরি করতে এবং এগুলিকে ডোমে যুক্ত করতে হবে? কোনও ফাংশন থেকে ডকুমেন্ট.রাইট দিয়ে এটি করার কোনও উপায় আছে কি?
— ক্রেগ
5
জুমব্যাটের পরামর্শ অনুসারে, বাহ্যিক স্ক্রিপ্টটি লোড করতে একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করুন, চাকাটি পুনরায় উদ্ভাবনের চেষ্টা করবেন না। জিকুয়েরি এটিকে অত্যন্ত সহজ করে তোলে, কেবল জিকুয়েরি অন্তর্ভুক্ত করুন এবং কল করুন: getgetScript (url)। আপনি একটি কলব্যাক ফাংশনও সরবরাহ করতে পারেন যা একবার স্ক্রিপ্ট লোড হয়ে গেলে কার্যকর করা হবে।
— এরিয়েল পপভস্কি
2
এরিয়েল ঠিক আছে। আপনার কোডটি সংক্ষিপ্ত রাখার চেষ্টা করার জন্য আমি প্রশংসা করি এবং এর সাথে একটি <script>ট্যাগ যুক্ত innerHTMLকরা সংক্ষিপ্ত হতে পারে তবে এটি কার্যকর হয় না। এটি পুরোপুরি চালিত না হওয়া অবধি কেবলমাত্র সরল পাঠ্য eval()। এবং দুঃখের বিষয়, eval()এইচটিএমএল ট্যাগগুলি বিশ্লেষণ করে না, তাই আপনি সমস্যার শৃঙ্খলে শেষ করেন।
— জুমব্যাট
21
eval () কোনও সমস্যার দুর্দান্ত সমাধান নয়।
— বুলে
2
আমি নিজেই ইওল () চেষ্টা করেছিলাম। এটি একটি ভয়াবহ ধারণা। আপনাকে প্রতিবার প্রতিটি সময় পুরো জিনিসটি প্রকাশ করতে হবে । এমনকি যদি আপনি কোনও ভেরিয়েবলের নাম এবং মান ঘোষণা করেন তবে এটিকে কার্যকর করার জন্য আপনাকে প্রতিবার নতুন করে ঘোষণা / পুনরায় ঘোষণা () করতে হবে। এটি ত্রুটির একটি দুঃস্বপ্ন।
— Youstay Igo
88

আপনার সমস্যার একটি খুব আকর্ষণীয় সমাধান এখানে: http://24ways.org/2005/have-your-dom-and-script-it-too

সুতরাং স্ক্রিপ্ট ট্যাগগুলির পরিবর্তে এটি ব্যবহার করুন:

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />

— user447963
সূত্র
12
এটা অসাধারণ!
— বিভক্ত করুন
আমার জন্য কাজ করে না, যখন একটি এজাক্স অনুরোধের ফলাফল sertedোকানো হয়: সিনট্যাক্স ত্রুটি অনুপস্থিত; স্ক্রিপ্ট স্ট্রিংয়ের শুরুতে বিবৃতি দেওয়ার আগে
— অলিভার
আপনি কীভাবে আপনার পৃষ্ঠাগুলিতে & lt; img src ... লাইন যুক্ত করবেন? আপনি কি এটি ডকুমেন্ট.ও রাইট () করেন বা ডকুমেন্ট.ডি.ইন.ইনার.এইচটিএমএল + = এর জন্য ব্যবহার করেন? উভয়ই আমার জন্য ব্যর্থ :(
— Youstay Igo
কোনও onloadবৈশিষ্ট্যের ভিতরে প্রচুর কোড লিখতে খুব ব্যবহারিক নয় । এছাড়াও এটির জন্য একটি অতিরিক্ত ফাইল থাকা এবং লোড করা দরকার। মোমোর সমাধানটি কোনও আপস কম হয়।
— ফ্রেগান্ট
15
আপনি আপনার ট্রিগার-চিত্রটিকে বেস 64 হিসাবে এনকোড করতে পারেন <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(এটি কোনও নেটওয়ার্কের অনুরোধ করবে না) আসলে ... আপনার কোনও চিত্রের দরকার নেই, অস্তিত্বহীন চিত্রটি onloadব্যবহারের পরিবর্তে onerror(তবে এটি কোনও নেটওয়ার্কের অনুরোধ করবে)
— ড্যানি '365CSI' এঙ্গেলম্যান
82

এখানে এমন একটি পদ্ধতি যা কার্যকরভাবে কার্যকর সকল স্ক্রিপ্টকে পুনরাবৃত্তভাবে প্রতিস্থাপন করে: 

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i        = 0;
                var children = node.childNodes;
                while ( i < children.length ) {
                        nodeScriptReplace( children[i++] );
                }
        }

        return node;
}
function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;
        for( var i = node.attributes.length-1; i >= 0; i-- ) {
                script.setAttribute( node.attributes[i].name, node.attributes[i].value );
        }
        return script;
}

উদাহরণ কল: 

nodeScriptReplace(document.getElementsByTagName("body")[0]);
— MMM
সূত্র
9
আমি কিছুটা অবাক হয়েছি যে আপনার উত্তরটি পুরোপুরি বন্ধ হয়ে গেছে। আইএমএইচও, এটি সেরা সমাধান, এই পদ্ধতিটি আপনাকে নির্দিষ্ট url বা সামগ্রী সহ স্ক্রিপ্টগুলি সীমাবদ্ধ করার অনুমতি দেয়।
— ডেভিডম
1
@ inf3rno না কি করে না? এটি কাজ করত, কেউ কি কখনও আলাদা কিছু দাবি করেছিল?
— মিমি
[0] এর পূর্বপদগুলি কী? আপনি কি নোডস্ক্রিপ্টপ্লেস ব্যবহার করতে পারেন (ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ()। এইচটিএমএল)
— বাও থাই
@ বাওথাই হ্যাঁ আপনি পারেন।
— মিমি
IWebBrowser2- এ সহায়তা করার কথা মনে হচ্ছে না; আমি নিশ্চিত করতে পারি যে স্ক্রিপ্ট ট্যাগগুলি ক্রিয়েইলেট এলিমেন্টের সাথে পুনরায় তৈরি করা যায় তবে আমি এখনও ইনভোকস্ক্রিপ্ট () এর মাধ্যমে সেগুলি চালিত করতে অক্ষম।
— ডেভ
46

আপনি স্ক্রিপ্ট তৈরি করতে পারেন এবং তারপরে সামগ্রীটি ইনজেক্ট করতে পারেন। 

var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);

এটি সমস্ত ব্রাউজারে কাজ করে :)

— পাবলো মোরেটি
সূত্র
1
নথিতে অন্য কোনও স্ক্রিপ্ট উপাদান না থাকলে n't document.documentElementপরিবর্তে ব্যবহার করুন।
— এলি গ্রে
4
প্রয়োজনীয় নয় কারণ আপনি অন্য স্ক্রিপ্ট থেকে একটি স্ক্রিপ্ট লিখছেন। <script> var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; //reference this script g.text = "alert(\"hi\");" s.parentNode.insertBefore(g, s); </script>
— পাবলো মোরেট্টি
3
কে বলে যে এটি অন্য লিপি থেকে এসেছে? আপনি <script>উপাদান ছাড়াই জাভাস্ক্রিপ্ট চালাতে পারেন । যেমন <img onerror="..." src="#">এবং <body onload="...">। আপনি যদি প্রযুক্তিগত হতে চান, তবে অনভিজ্ঞ নেমস্পেসিংয়ের কারণে এটি নন- এইচটিএমএল / এসভিজি নথিতে কাজ করবে না।
— এলি গ্রে
2
ফেসবুক পাবলোর উত্তরটি তাদের এসডিকে ব্যবহার করে। বিকাশকারী.ফেসবুক.
— com
30

আমি এই কোডটি ব্যবহার করেছি, এটি ভাল কাজ করছে

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
— ফিরস নিজাম
সূত্র
1
ধন্যবাদ। এটি টিনিবক্স 2 জ্যাকুয়েরি প্লাগইন ব্যবহার করে তৈরি করা একটি মডেল পপআপে ডিস্কাস ইউনিভার্সাল কোড যুক্ত করার আমার সমস্যাটিকে স্থির করেছে।
— gsinha
3
দুর্ভাগ্যক্রমে, যখন এই স্ক্রিপ্টটিতে এমন ফাংশন রয়েছে যা পরবর্তী সময়ে ডাকা হবে তখন এই সমাধানটি কাজ করে না।
— হোসে গমেজ
7

আমার অভ্যন্তরীণ এইচটিএমএল নিয়ে এই সমস্যা ছিল, আমাকে আমার রিঅ্যাকটিজস অ্যাপ্লিকেশনটির "হেড" ট্যাগে একটি হটজার স্ক্রিপ্ট যুক্ত করতে হয়েছিল এবং এটি সংযোজন করার পরে ঠিকই সম্পাদন করতে হবে।

"প্রধান" ট্যাগে গতিশীল নোড আমদানির জন্য ভাল সমাধানগুলির একটি রিঅ্যাক্ট-হেলমেন্ট মডিউল।

এছাড়াও, প্রস্তাবিত ইস্যুটির একটি কার্যকর সমাধান রয়েছে:

অভ্যন্তরীণ এইচটিএমএলে কোনও স্ক্রিপ্ট ট্যাগ নেই!

দেখা যাচ্ছে যে এইচটিএমএল 5 অভ্যন্তরীণ এইচটিএমএল সম্পত্তি ব্যবহার করে স্ক্রিপ্ট ট্যাগগুলি গতিশীলভাবে যুক্ত করার অনুমতি দেয় না। সুতরাং নিম্নলিখিতগুলি কার্যকর করা হবে না এবং হ্যালো ওয়ার্ল্ড বলে কোনও সতর্কতা থাকবে না!

element.innerHTML = "<script>alert('Hello World!')</script>";

এটি এইচটিএমএল 5 স্পটে নথিভুক্ত করা হয়েছে:

দ্রষ্টব্য: অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে scriptোকানো স্ক্রিপ্ট উপাদানগুলি theyোকানো হলে তা কার্যকর হয় না।

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

সমাধান: গতিময় স্ক্রিপ্ট যুক্ত করা

একটি স্ক্রিপ্ট ট্যাগ গতিশীলভাবে যুক্ত করতে, আপনাকে একটি নতুন স্ক্রিপ্ট উপাদান তৈরি করতে হবে এবং এটি লক্ষ্য উপাদানটিতে যুক্ত করতে হবে।

আপনি এটি বাহ্যিক স্ক্রিপ্টগুলির জন্য করতে পারেন:

var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);

এবং ইনলাইন স্ক্রিপ্টগুলি:

var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript); 
target.appendChild(newScript);
— p.daniel
সূত্র
5

যে কেউ এখনও এটি করার চেষ্টা করছেন, না, আপনি কোনও স্ক্রিপ্ট ব্যবহার করে ইনজেক্ট করতে পারবেন না innerHTMLতবে Blobএবং এবং ব্যবহার করে একটি স্ট্রিপ স্ক্রিপ্ট ট্যাগে লোড করা সম্ভব URL.createObjectURL।

আমি একটি উদাহরণ তৈরি করেছি যা আপনাকে স্ক্রিপ্ট হিসাবে একটি স্ট্রিং চালাতে দেয় এবং কোনও প্রতিশ্রুতির মাধ্যমে স্ক্রিপ্টটির 'রফতানি' ফিরিয়ে আনতে দেয়:

function loadScript(scriptContent, moduleId) {
    // create the script tag
    var scriptElement = document.createElement('SCRIPT');

    // create a promise which will resolve to the script's 'exports'
    // (i.e., the value returned by the script)
    var promise = new Promise(function(resolve) {
        scriptElement.onload = function() {
            var exports = window["__loadScript_exports_" + moduleId];
            delete window["__loadScript_exports_" + moduleId];
            resolve(exports);
        }
    });

    // wrap the script contents to expose exports through a special property
    // the promise will access the exports this way
    var wrappedScriptContent =
        "(function() { window['__loadScript_exports_" + moduleId + "'] = " + 
        scriptContent + "})()";

    // create a blob from the wrapped script content
    var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});

    // set the id attribute
    scriptElement.id = "__loadScript_module_" + moduleId;

    // set the src attribute to the blob's object url 
    // (this is the part that makes it work)
    scriptElement.src = URL.createObjectURL(scriptBlob);

    // append the script element
    document.body.appendChild(scriptElement);

    // return the promise, which will resolve to the script's exports
    return promise;
}

...

function doTheThing() {
    // no evals
    loadScript('5 + 5').then(function(exports) {
         // should log 10
        console.log(exports)
    });
}

আমি এটি আমার বাস্তব বাস্তবায়ন থেকে সরলীকৃত করেছি, সুতরাং কোনও প্রতিশ্রুতি নেই যে এতে কোনও ত্রুটি নেই। তবে নীতিটি কাজ করে।

স্ক্রিপ্টটি চলার পরে যদি আপনি কোনও মান ফিরে পাওয়ার বিষয়ে চিন্তা না করেন তবে এটি আরও সহজ; শুধু Promiseএবং onloadবিট ছেড়ে দিন । এমনকি আপনার স্ক্রিপ্ট মোড়ানো বা বৈশ্বিক window.__load_script_exports_সম্পত্তি তৈরি করার প্রয়োজন নেই ।

— JayArby
সূত্র
1
আমি এটি চেষ্টা করেছি এবং এটি ক্রোম 57 এ কাজ করে। স্ক্রিপ্ট ট্যাগের অভ্যন্তরীণ এইচটিএমএল পাঠ্যকে কার্যকর করে।
— আইফেরিয়ান
এটি আকর্ষণীয়, এটি আগে কাজ করে না। আমি ভাবছি যদি এই আচরণটি ক্রস ব্রাউজার হয় বা কেবল ক্রোম 57 এ থাকে
— Jay
4

আমি আমাদের বিজ্ঞাপন সার্ভারে যে উপাদানটি ব্যবহার করি তার অভ্যন্তরীণ এইচটিএমএল সেট করতে এখানে একটি পুনরাবৃত্ত ফাংশন রয়েছে:

// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
    if (clear) o.innerHTML = "";

    // Generate a parseable object with the html:
    var dv = document.createElement("div");
    dv.innerHTML = html;

    // Handle edge case where innerHTML contains no tags, just text:
    if (dv.children.length===0){ o.innerHTML = html; return; }

    for (var i = 0; i < dv.children.length; i++) {
        var c = dv.children[i];

        // n: new node with the same type as c
        var n = document.createElement(c.nodeName);

        // copy all attributes from c to n
        for (var j = 0; j < c.attributes.length; j++)
            n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);

        // If current node is a leaf, just copy the appropriate property (text or innerHTML)
        if (c.children.length == 0)
        {
            switch (c.nodeName)
            {
                case "SCRIPT":
                    if (c.text) n.text = c.text;
                    break;
                default:
                    if (c.innerHTML) n.innerHTML = c.innerHTML;
                    break;
            }
        }
        // If current node has sub nodes, call itself recursively:
        else setHTML(n, c.innerHTML, false);
        o.appendChild(n);
    }
}

আপনি এখানে ডেমো দেখতে পারেন ।

— আদনান কর্কমাজ
সূত্র
3

আপনি এটি এইভাবে করতে পারে:

var mydiv = document.getElementById("mydiv");
var content = "<script>alert(\"hi\");<\/script>";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    eval(scripts[i].innerText);
}
— জেক
সূত্র
3

এখানে একটি সমাধান যা ব্যবহার করে না evalএবং স্ক্রিপ্টগুলি , লিঙ্কযুক্ত স্ক্রিপ্টগুলির পাশাপাশি মডিউলগুলির সাথে কাজ করে ।

ফাংশনটি 3 টি পরামিতি গ্রহণ করে:

  • এইচটিএমএল : sertোকানোর জন্য এইচটিএমএল কোড সহ স্ট্রিং
  • গন্তব্য : লক্ষ্য উপাদান রেফারেন্স
  • সংযোজন : লক্ষ্য উপাদান html এর শেষে সংযোজন সক্ষম করতে বুলিয়ান পতাকা
function insertHTML(html, dest, append=false){
    // if no append is requested, clear the target element
    if(!append) dest.innerHTML = '';
    // create a temporary container and insert provided HTML code
    let container = document.createElement('div');
    container.innerHTML = html;
    // cache a reference to all the scripts in the container
    let scripts = container.querySelectorAll('script');
    // get all child elements and clone them in the target element
    let nodes = container.childNodes;
    for( let i=0; i< nodes.length; i++) dest.appendChild( nodes[i].cloneNode(true) );
    // force the found scripts to execute...
    for( let i=0; i< scripts.length; i++){
        let script = document.createElement('script');
        script.type = scripts[i].type || 'text/javascript';
        if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
        script.innerHTML = scripts[i].innerHTML;
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    // done!
    return true;
}
— colxi
সূত্র
মানে ... কোডের সামগ্রীর সাথে স্ক্রিপ্ট ট্যাগ যুক্ত করা একটি বিভক্ত, তাই না?
— কেভিন বি
@ কেভিনবি কুখ্যাত পার্থক্য রয়েছে ... চেষ্টা করুন eval('console.log(this)')এবং আপনি সবচেয়ে সুস্পষ্ট একটি দেখতে পাবেন
— ২১:০৮
তাহলে প্রসঙ্গটি আলাদা, এবং? এটি এখনও কেবল একটি ইওল।
— কেভিন বি
@ কেভিনবি না এটি কোনও অভ্যাস নয়। এটি চেষ্টা করুন eval('let b=100').. এবং তারপরে b
— এভালটির
আমার জন্য কাজ কর. চিয়ার্স
— বেজ্জো
1

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

তার সমাধান উপভোগ করুন:

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

গুরুত্বপূর্ণ নোট:

  1. আপনার ডিভ ট্যাগ সহ লক্ষ্য উপাদানটি মোড়ানো দরকার
  2. ডিভি ট্যাগ সহ আপনার এসআরসি স্ট্রিং মোড়ানো দরকার।
  3. আপনি যদি সরাসরি এসআরসি স্ট্রিংটি লেখেন এবং এতে জেএস অংশগুলি অন্তর্ভুক্ত থাকে তবে দয়া করে ক্লোজিং স্ক্রিপ্ট ট্যাগগুলি সঠিকভাবে (\ এর আগে / সাথে) লিখতে মনোযোগ দিন কারণ এটি একটি স্ট্রিং।
— user3198805
সূত্র
1

$(parent).html(code)পরিবর্তে ব্যবহার করুনparent.innerHTML = code ।

নিম্নলিখিতটি এমন স্ক্রিপ্টগুলিও স্থির করে যা বৈশিষ্ট্যের document.writeমাধ্যমে লোড হওয়া স্ক্রিপ্টগুলি src। দুর্ভাগ্যক্রমে এমনকি এটি গুগল অ্যাডসেন্স স্ক্রিপ্টগুলির সাথেও কাজ করে না।

var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "<br/>");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}

উৎস

— iirekm
সূত্র
1
এখানে কিছুটা দেরি করা হয়েছে, তবে যে কেউ এই পদ্ধতিটি ব্যবহার করতে পারেন, লক্ষ্য করুন যে জিকুয়রিতে আপনাকে আপনার স্ক্রিপ্টগুলি <স্ক্রিপ্ট src = "url> </script> এর চেয়ে $ .লোডস্ক্রিপ্ট (url) ব্যবহার করে লোড করতে হবে - পরবর্তী কারণগুলি ব্রাউজারগুলিতে সিঙ্ক্রোনাস এক্সএমএলএইচটিপি অনুসন্ধানের ত্রুটিটি
— হ্রাস করা হয়েছে
1

টেমপ্লেট এবং ডকুমেন্ট.অম্পোর্টনোড ব্যবহার করার চেষ্টা করুন। এখানে একটি উদাহরণ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  
  for (var i=0; i < t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
</script>
 
</body>
</html>
স্নিপেট প্রসারিত করুন

— ধূসর
সূত্র
1
এটি মাইক্রোসফ্ট এজ, অন্য কোনও কাজের সাথে কাজ করে না?
— আত্মা
1

আপনি নিজের <script>মতো এটিও গুটিয়ে রাখতে পারেন এবং এটি কার্যকর হবে:

<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';

দয়া করে নোট করুন: ভিতরে স্কোপটি srcdociframe বোঝায়, সুতরাং topপিতামাত্ত দস্তাবেজ অ্যাক্সেস করার জন্য আপনাকে উপরের উদাহরণের মতো ব্যবহার করতে হবে ।

— naden
সূত্র
0

হ্যাঁ আপনি পারেন, তবে আপনাকে এটি ডিওএমের বাইরে করতে হবে এবং ক্রমটি সঠিক হতে হবে।

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    n.innerHTML = scr;
    document.body.appendChild(n);
}

... 'ফু' সতর্ক করবে। এটি কাজ করবে না:

document.getElementById("myDiv").innerHTML = scr;

এমনকি এটিও কাজ করবে না, কারণ নোডটি প্রথমে inোকানো হয়েছে:

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}
— mwilcox
সূত্র
16
এটির জন্য মূল্য: এটি বর্তমান ব্রাউজারগুলিতে কাজ করে না।
— উইচার্ট আক্কারম্যান
0

এই সমস্যার জন্য আমার সমাধান হ'ল নোডগুলি সনাক্ত করার জন্য মিউটেশন পর্যবেক্ষক সেট করা <script></script>এবং তারপরে <script></script>একই এসসিআর দিয়ে এটি একটি নতুন নোডের সাথে প্রতিস্থাপন করা । উদাহরণ স্বরূপ:

let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=>{
    mutations.map(mutation=>{
        Array.from(mutation.addedNodes).map(node=>{
            if ( node.parentNode == parentNode ) {
                let scripts = node.getElementsByTagName('script')
                Array.from(scripts).map(script=>{
                    let src = script.src
                    script = document.createElement('script')
                    script.src = src
                    return script
                })
            }
        })
    })
})
observer.observe(document.body, {childList: true, subtree: true});
— গ্যাব্রিয়েল গার্সিয়া
সূত্র
1
কেন বললাম না করে আমাকে হ্রাস করার জন্য ধন্যবাদ। ভালোবাসি সবাইকে.
— গ্যাব্রিয়েল গার্সিয়া
0

গ্যাব্রিয়েল গার্সিয়ার মিউটেশনঅবার্সারগুলির উল্লেখ সঠিক পথে রয়েছে, তবে আমার পক্ষে বেশ কার্যকর হয়নি। আমি নিশ্চিত নই যে এটি ব্রাউজারের কৌতুকের কারণে বা আমার শেষের কোনও ভুলের কারণে হয়েছিল, তবে যে সংস্করণটি আমার জন্য কাজ করে শেষ হয়েছিল তা হ'ল:

document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=>{
        mutations.map(mutation=>{
            Array.from(mutation.addedNodes).map(node=>{
                if (node.tagName === "SCRIPT") {
                    var s = document.createElement("script");
                    s.text=node.text;
                    if (typeof(node.parentElement.added) === 'undefined')
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild(node);
                    document.head.appendChild(s);
                }
            })
        })
    })
    observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};

অবশ্যই, আপনাকে element_to_watchযে উপাদানটি সংশোধন করা হচ্ছে তার নামটি প্রতিস্থাপন করা উচিত ।

node.parentElement.addedস্ক্রিপ্ট ট্যাগগুলি যুক্ত করার জন্য ব্যবহৃত হয় document.head। বাহ্যিক পৃষ্ঠাটি লোড করতে ব্যবহৃত ফাংশনে, আপনি আর প্রাসঙ্গিক স্ক্রিপ্ট ট্যাগগুলি সরাতে নিম্নলিখিত জাতীয় কিছু ব্যবহার করতে পারেন:

function freeScripts(node){
    if (node === null)
        return;
    if (typeof(node.added) === 'object') {
        for (var script in node.added) {
            document.head.removeChild(node.added[script]);
        }
        node.added = {};
    }
    for (var child in node.children) {
        freeScripts(node.children[child]);
    }
}

এবং একটি লোড ফাংশন শুরুর উদাহরণ:

function load(url, id, replace) {
    if (document.getElementById(id) === null) {
        console.error("Element of ID "+id + " does not exist!");
        return;
    }
    freeScripts(document.getElementById(id));
    var xhttp = new XMLHttpRequest();
    // proceed to load in the page and modify innerHTML
}
— pixelherodev
সূত্র
আপনি খেয়াল করেছেন যে প্রতিবার MutationObserverকোনও উপাদান নথিতে যুক্ত হওয়ার পরে আপনি একটি নতুন যুক্ত করছেন? বিটিডব্লু, আপনি কেন আমার কোডটি কার্যকরী নয় বলে আমি অবাক হই।
— গ্যাব্রিয়েল গার্সিয়া
@ গ্যাব্রিয়েলগার্সিয়া আমি বলেছিলাম যে আপনার কোডটি কার্যকর ছিল না কারণ আমি এটি চেষ্টা করেছি এবং এটি কেবল কার্যকর হয়নি। এখন এটির দিকে তাকানো, এটি সম্পূর্ণরূপে সম্ভব যা আমার উপর ছিল, আপনি নয় এবং আমি যেভাবে এই কথাটি বলেছি তার জন্য আন্তরিকভাবে ক্ষমা চাই। এখনই এটি ঠিক করা।
— পিক্সেলেরেদেভ
পুনরায়: প্রতিটি বার নথিতে কোনও উপাদান যুক্ত হওয়ার পরে কোনও মিউটেশনঅবার্সবার যুক্ত করা, আপনি কী সম্পর্কে কথা বলছেন? ডিওএম কনটেন্টলয়েড, এবং আমি এখানে এমডিএন থেকে উদ্ধৃতি দিয়েছি, "স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলি লোডিং শেষ করার জন্য অপেক্ষা না করে প্রাথমিক HTML ডকুমেন্টটি পুরোপুরি লোড এবং পার্স করা হয়ে গেলে আগুন লাগে।" এটি একবার এবং একবার মাত্র। তদ্ব্যতীত, এই স্ক্রিপ্টটি আমার সাইটে সমস্যা ছাড়াই কাজ করছে এবং ডিবাগিংটি এটি কেবল একবার ঘটতে দেখায়, সুতরাং এটি একবারে অনুশীলনের পাশাপাশি তত্ত্ব হিসাবেও রয়েছে।
— পিক্সেলেরেদেভ
1
তুমি ঠিক বলেছ ... আমি এটা মিস করেছি আমার ক্ষমা প্রার্থনা পাশাপাশি।
— গ্যাব্রিয়েল গার্সিয়া
— @ গ্যাব্রিয়েলগার্সিয়া
0

আমার পক্ষে সবচেয়ে ভাল উপায় হ'ল ইনডিআরএইচটিএমএল এর মাধ্যমে নতুন এইচটিএমএল সামগ্রী sertোকানো এবং তারপরে ব্যবহার

setTimeout(() => {
        var script_el = document.createElement("script")
        script_el.src = 'script-to-add.js'
        document.body.appendChild(script_el)
    }, 500)

সেটটাইমআউট প্রয়োজন হয় না তবে এটি আরও ভাল কাজ করে। এটি আমার পক্ষে কাজ করেছে।

— লুইস টিয়াগো ফ্লোরস ক্রিস্টাভোও
সূত্র
-1

অভ্যন্তরীণ এইচটিএমএল থেকে (জাভা স্ক্রিপ্ট) ট্যাগটি কার্যকর করুন

আপনার স্ক্রিপ্ট উপাদানটি ডিভের সাথে শ্রেণীর বৈশিষ্ট্যযুক্ত শ্রেণি = "জাভাস্ক্রিপ্ট" দিয়ে প্রতিস্থাপন করুন এবং এটি দিয়ে বন্ধ করুন </div>

আপনি যে সামগ্রীটি কার্যকর করতে চান তা পরিবর্তন করবেন না (আগে এটি স্ক্রিপ্ট ট্যাগে ছিল এবং এখন এটি ডিভ ট্যাগে রয়েছে)

আপনার পৃষ্ঠায় একটি শৈলী যুক্ত করুন ...

<style type="text/css"> .javascript { display: none; } </style>

এখন jquery ব্যবহার করে ইওল চালান (Jquery js ইতিমধ্যে অন্তর্ভুক্ত করা উচিত)

   $('.javascript').each(function() {
      eval($(this).text());

    });`

আপনি আমার ব্লগে এখানে আরও অন্বেষণ করতে পারেন ।

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