निष्पादन <स्क्रिप्ट> तत्वों .innerHTML के साथ डाला

Question

मुझे एक स्क्रिप्ट मिली है जो किसी सामग्री का उपयोग करके कुछ सामग्री सम्मिलित करती है innerHTML।

उदाहरण के लिए सामग्री हो सकती है:

<script type="text/javascript">alert('test');</script>
<strong>test</strong>

समस्या यह है कि <script>टैग के अंदर कोड निष्पादित नहीं होता है। मैंने इसे थोड़ा सा देखा लेकिन कोई स्पष्ट समाधान नहीं था। यदि मैंने jQuery $(element).append(content);का उपयोग करके सामग्री सम्मिलित की है , तो स्क्रिप्ट भागों को evalDOM में इंजेक्ट होने से पहले d मिल गया ।

क्या किसी को कोड का स्निपेट मिला है जो सभी <script>तत्वों को निष्पादित करता है ? JQuery कोड थोड़ा जटिल था इसलिए मैं वास्तव में यह पता नहीं लगा सका कि यह कैसे किया गया था।

संपादित करें :

JQuery कोड में झाँककर मैंने यह पता लगाने में कामयाबी हासिल की कि jQuery कैसे करता है, जिसके परिणामस्वरूप निम्न कोड है:

Demo:
<div id="element"></div>

<script type="text/javascript">
  function insertAndExecute(id, text)
  {
    domelement = document.getElementById(id);
    domelement.innerHTML = text;
    var scripts = [];

    ret = domelement.childNodes;
    for ( var i = 0; ret[i]; i++ ) {
      if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
            scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
        }
    }

    for(script in scripts)
    {
      evalScript(scripts[script]);
    }
  }
  function nodeName( elem, name ) {
    return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
  }
  function evalScript( elem ) {
    data = ( elem.text || elem.textContent || elem.innerHTML || "" );

    var head = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";
    script.appendChild( document.createTextNode( data ) );
    head.insertBefore( script, head.firstChild );
    head.removeChild( script );

    if ( elem.parentNode ) {
        elem.parentNode.removeChild( elem );
    }
  }

  insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>

Comments

आप केवल तत्व के बच्चों को पुनरावृत्त क्यों नहीं कर सकते हैं, और हर एक के लिए एक स्क्रिप्ट तत्व है जिसे आप सिर्फ उस बच्चे के आंतरिक () आंतरिक के रूप में स्पष्ट करते हैं? यह है कि मैंने इसे बड़े घटक विक्रेता द्वारा देखा है, हर बार जब वे अजाक्स कॉलबैक को पूरा करते हैं जो डोम के लिए सामान जोड़ता है जो वे वास्तव में करते हैं। यह ध्यान में रखें कि यह धीमा हो सकता है, खासकर IE7 में।

— स्लगस्टर

एंड्रियास: यदि मैं एक फ़ंक्शन जोड़ता हूं, उदाहरण के function testFunction(){ alert('test'); }लिए इनर HTML में डाले गए कोड के लिए , और फिर इसे कॉल करने का प्रयास करें, तो यह कहता है कि फ़ंक्शन परिभाषित नहीं है।

— फिडाह

बहुत बढ़िया फ़िदाह, चार्म की तरह काम करता है, चीयर्स

— Marcin

मुझे लगता है कि यह समझना सबसे महत्वपूर्ण है कि क्रॉस-साइट स्क्रिप्टिंग हमलों को रोकने के लिए यह ब्राउज़र द्वारा किया गया व्यवहार है। यदि आपके द्वारा आंतरिक HTML के रूप में सेट किया गया टेक्स्ट बॉब द्वारा प्रदान किया गया है, तो यह ऐलिस के ब्राउज़र को नुकसान पहुंचाएगा (एक मंच के बारे में सोचें जहां लोग स्क्रिप्ट-टैग जोड़कर टिप्पणियां लिख सकते हैं)। आप इसे यहाँ के बारे में अधिक पढ़ सकते हैं: en.wikipedia.org/wiki/Cross-site_scripting । बच के रहना!

— ज़ातियन

2010 से एक HTML बहुत बदल गया। ये वर्तमान दिन, शायद आप देखना चाहते हैं: stackoverflow.com/a/58862506/890357

— marciowb

Answer 1

ओपी की स्क्रिप्ट IE में काम नहीं करती है। SO की मदद से, यहाँ एक स्क्रिप्ट है जो यह करती है:

exec_body_scripts: function(body_el) {
  // Finds and executes scripts in a newly added element's body.
  // Needed since innerHTML does not run scripts.
  //
  // Argument body_el is an element in the dom.

  function nodeName(elem, name) {
    return elem.nodeName && elem.nodeName.toUpperCase() ===
              name.toUpperCase();
  };

  function evalScript(elem) {
    var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
        head = document.getElementsByTagName("head")[0] ||
                  document.documentElement,
        script = document.createElement("script");

    script.type = "text/javascript";
    try {
      // doesn't work on ie...
      script.appendChild(document.createTextNode(data));      
    } catch(e) {
      // IE has funky script nodes
      script.text = data;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);
  };

  // main section of function
  var scripts = [],
      script,
      children_nodes = body_el.childNodes,
      child,
      i;

  for (i = 0; children_nodes[i]; i++) {
    child = children_nodes[i];
    if (nodeName(child, "script" ) &&
      (!child.type || child.type.toLowerCase() === "text/javascript")) {
          scripts.push(child);
      }
  }

  for (i = 0; scripts[i]; i++) {
    script = scripts[i];
    if (script.parentNode) {script.parentNode.removeChild(script);}
    evalScript(scripts[i]);
  }
};

Comments

बेहतर उपयोग jQuery के $(parent).html(code)- नीचे मेरा जवाब देखें।

— आयरे

एक बार जब स्क्रिप्ट को DOM में इंजेक्ट किया जाता है, तो मुझे इसे कैसे निकालना चाहिए?

— S4beR

स्क्रिप्ट पुनरावर्ती नहीं है, इसलिए केवल प्रत्यक्ष बच्चों को देखेंगे। यह मेरे लिए काम करता है:if (nodeName(child, "script" ) && (!child.type || child.type.toLowerCase() === "text/javascript")) { scripts.push(child); } else { exec_body_scripts(child); }

— st4wik

ध्यान दें कि उपरोक्त कोड src के माध्यम से लोड होने वाली स्क्रिप्ट को निष्पादित नहीं करता है। उपरोक्त स्क्रिप्ट को इसकी पाठ सामग्री को सेट करने के बजाय बनाए गए स्क्रिप्ट तत्व elem.srcकी srcसंपत्ति की जांच और सशर्त रूप से सेट करने के लिए बदला जा सकता है।

— बजे रयान मोरलोक

एक तत्व बनाने और उसे सम्मिलित करने के बजाय वैश्विक evalट्रिक का उपयोग क्यों नहीं किया <script>जाता है <head>? वे दोनों वर्तमान बंद को उजागर किए बिना जेएस कोड निष्पादित करते हैं।

— फिन्डे

Answer 2

@phidah ... यहाँ आपकी समस्या का एक बहुत ही दिलचस्प समाधान है: http://24ways.org/2005/have-your-dom-and-script-it-too

तो यह इस तरह दिखेगा:

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

Comments

और भी बेहतर, "onerror" घटना के साथ एक छवि रखने की आवश्यकता नहीं है, त्वरित XSS इंजेक्शन के लिए अच्छा है jvfconsulting.com/blog/47/… :)

— baptx

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">यदि आप बेकार http अनुरोध को रोकना चाहते हैं तो आप इसका उपयोग कर सकते हैं ।

— सावास वेदोवा

इसे प्यार करना ! (जोड़ा style="display:none;) टूटी हुई छवि आइकन को छिपाने के लिए

— क्रिश

वास्तव में, <style>से बेहतर है <img>, क्योंकि यह एक नेटवर्क अनुरोध नहीं करता है

— बेसिन

Answer 3

यहाँ एक छोटी, अधिक कुशल स्क्रिप्ट है जो srcसंपत्ति के साथ स्क्रिप्ट के लिए भी काम करती है:

function insertAndExecute(id, text) {
    document.getElementById(id).innerHTML = text;
    var scripts = Array.prototype.slice.call(document.getElementById(id).getElementsByTagName("script"));
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src != "") {
            var tag = document.createElement("script");
            tag.src = scripts[i].src;
            document.getElementsByTagName("head")[0].appendChild(tag);
        }
        else {
            eval(scripts[i].innerHTML);
        }
    }
}

नोट: whilst evalसुरक्षा सुरक्षा भेद्यता का कारण हो सकता है अगर ठीक से उपयोग नहीं किया जाता है, तो यह मक्खी पर एक स्क्रिप्ट टैग बनाने की तुलना में बहुत तेज़ है।

Comments

इससे मुझे मदद मिली लेकिन मैं eval का उपयोग करके गंदा महसूस करता हूं। यह सुनिश्चित करना कि पाठ से समझौता नहीं किया जा सकता, मुझे कोई भेद्यता नहीं दिखती।

— जॉन

@ यादृच्छिक-उपयोगकर्ता evalको उपयोगकर्ताओं को चोट पहुंचाने के लिए डिज़ाइन किया गया था। किसी भी गतिशील स्क्रिप्ट निष्पादन एक जोखिम है और यही कारण है कि सीएसपी इसे कहता है 'unsafe-eval'क्योंकि यह है। यदि आप इसे लाइब्रेरी में उपयोग कर रहे हैं तो आप अपनी साइटों की सुरक्षा को भी नुकसान पहुँचा रहे हैं क्योंकि वे इसे बंद नहीं कर सकते।

— jonathanKingston

Chrome 44 में इसका परीक्षण करने से अनंत लूप का कारण बनता है, जब लिपियों को इस वृद्धि के बाद से बुलाया जाता है।

— कोड्विथचेस

srcसंपत्ति के साथ लिपियों को अतुल्यकालिक रूप से डाउनलोड किया जाएगा और आगमन के रूप में निष्पादित किया जाएगा। आदेश देना संरक्षित नहीं है। इनलाइन लिपियों को भी आउट-ऑफ-ऑर्डर निष्पादित किया जाएगा, सिंक्रोनस से पहले सिंक्रोनाइज़ किया जाएगा।

— रोबर्ट 4

Answer 4

आपको आंतरिक HTML प्रॉपर्टी का उपयोग नहीं करना चाहिए, बल्कि नोड का एपेंडचाइल्ड तरीका: डॉक्यूमेंट ट्री [HTML DOM] में एक नोड। इस तरह से आप बाद में अपने इंजेक्टेड कोड को कॉल कर सकते हैं।

सुनिश्चित करें कि आप समझते हैं कि node.innerHTML जैसा है वैसा नहीं है node.appendChild । आप अधिक विवरण और DOM के लिए जावास्क्रिप्ट क्लाइंट संदर्भ पर कुछ समय बिताना चाह सकते हैं। आशा है कि निम्नलिखित मदद करता है ...

नमूना इंजेक्शन काम करता है:

<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
    function doOnLoad(){
        addScript('inject',"function foo(){ alert('injected'); }");
    }


    function addScript(inject,code){
        var _in = document.getElementById('inject');
        var scriptNode = document.createElement('script');
        scriptNode.innerHTML = code;
        _in.appendChild(scriptNode);
    }

</script>
</head>
<body onload="doOnLoad();">
    <div id="header">some content</div>
    <div id="inject"></div>
    <input type="button" onclick="foo(); return false;" value="Test Injected" />
</body>
</html>

सादर,

Comments

अंत में कोई ऐसा व्यक्ति जो वास्तव में अन्य सभी try this, look how clever I amउत्तरों के बजाय इस मुद्दे के बारे में थोड़ा व्याख्या करता है। एक यूवी का वर्णन करता है, यह मेरा हो गया।

— रिग्सफॉली 12

मैं इसे uv करता हूं क्योंकि यह जावास्क्रिप्ट कोड को इंजेक्ट करने का सबसे सरल तरीका है जो इंजेक्शन लगाने के बाद निष्पादित होता है। मैं केवल भीतर HTML के साथ जोड़ने के बीच के अंतर को समझ नहीं पा रहा हूं, जो निष्पादित नहीं करता है, और ऊपर परिशिष्ट के साथ जिस तरह से निष्पादित करता है। मैंने इसे सफलतापूर्वक सॉकेट के साथ स्क्रैच से स्क्रिप्ट के साथ एक डायनामिक पेज बनाने के लिए उपयोग किया

— गीला करें

var _in = document.getElementById(inject);, मुझे लगता है।

— रॉन बर्क

Answer 5

एक उदाहरण के साथ @ joshcomley के उत्तर का सरलीकृत ES6 संस्करण।

कोई JQuery, कोई पुस्तकालय, कोई eval, कोई DOM परिवर्तन नहीं, बस शुद्ध जावास्क्रिप्ट।

http://plnkr.co/edit/MMegiu?p=preview

var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

प्रयोग

$0.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML($0, HTML); // does run <script> tags in HTML

Comments

टाइपो: फ़ंक्शन का नाम setInnerHtmlनहीं हैsetInnerHTML

— पेरी मिमोन

ध्यान दें कि जो plnkr से जुड़ा हुआ है, फ़ंक्शन का नाम है, setInnerHTMLलेकिन इसे फ़ंक्शन के setInnerHtmlभीतर से बुलाया जा रहा runBहै। इसलिए उदाहरण काम नहीं करता है

— danbars

Answer 6

इस स्निपेट को आज़माएं:

function stripAndExecuteScript(text) {
    var scripts = '';
    var cleaned = text.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, function(){
        scripts += arguments[1] + '\n';
        return '';
    });

    if (window.execScript){
        window.execScript(scripts);
    } else {
        var head = document.getElementsByTagName('head')[0];
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('type', 'text/javascript');
        scriptElement.innerText = scripts;
        head.appendChild(scriptElement);
        head.removeChild(scriptElement);
    }
    return cleaned;
};


var scriptString = '<scrip' + 't + type="text/javascript">alert(\'test\');</scr' + 'ipt><strong>test</strong>';
document.getElementById('element').innerHTML = stripAndExecuteScript(scriptString);

Comments

हाँ, यह विधि काम करती है, लेकिन अगर आपको कमेंट या कंसोल हैं तो आपको त्रुटियां मिलेंगी। इसलिए इसके लिए भी ध्यान रखें कि आप मॉड्यूल के लिए भी संशोधित कर सकते हैं मॉड्यूल मॉड्यूल = [] var साफ = text.replace (/ <script) ([^>) ] *)> (([\ s \ S] *?] <\ / script> / gi, फ़ंक्शन (m, टैग, स्क्रिप्ट) {if (/type="module"/.test(tags)) {मॉड्यूल.push (स्क्रिप्ट) वापसी} स्क्रिप्ट + = स्क्रिप्ट + '\ n' वापसी ''})

— zavr

Answer 7

function insertHtml(id, html)  
{  
   var ele = document.getElementById(id);  
   ele.innerHTML = html;  
   var codes = ele.getElementsByTagName("script");   
   for(var i=0;i<codes.length;i++)  
   {  
       eval(codes[i].text);  
   }  
}  

यह मेरी परियोजना में क्रोम में काम करता है

Comments

तेज और सुंदर। धन्यवाद।

— जॉर्ज फ्यूएंटेस गोंजालेज

बस! धन्यवाद।

— फ्लोरिस

Answer 8

"Eval" का उपयोग किए बिना एक समाधान:

var setInnerHtml = function(elm, html) {
  elm.innerHTML = html;
  var scripts = elm.getElementsByTagName("script");
  // If we don't clone the results then "scripts"
  // will actually update live as we insert the new
  // tags, and we'll get caught in an endless loop
  var scriptsClone = [];
  for (var i = 0; i < scripts.length; i++) {
    scriptsClone.push(scripts[i]);
  }
  for (var i = 0; i < scriptsClone.length; i++) {
    var currentScript = scriptsClone[i];
    var s = document.createElement("script");
    // Copy all the attributes from the original script
    for (var j = 0; j < currentScript.attributes.length; j++) {
      var a = currentScript.attributes[j];
      s.setAttribute(a.name, a.value);
    }
    s.appendChild(document.createTextNode(currentScript.innerHTML));
    currentScript.parentNode.replaceChild(s, currentScript);
  }
}

यह अनिवार्य रूप से स्क्रिप्ट टैग को क्लोन करता है और फिर ब्लॉक किए गए स्क्रिप्ट टैग को नए उत्पन्न के साथ बदल देता है, इस प्रकार निष्पादन की अनुमति देता है।

Answer 9

scriptNode.innerHTML = codeIE के लिए काम नहीं किया। केवल एक ही चीज़ को बदलना है scriptNode.text = codeऔर यह ठीक काम करता है

Answer 10

इसके $(parent).html(code)बजाय jquery का उपयोग करना आसान है parent.innerHTML = code:

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

यह उन लिपियों के साथ भी काम करता है जो विशेषता के document.writeमाध्यम से लोड और स्क्रिप्ट का उपयोग करते हैं src। दुर्भाग्य से यह भी गूगल ऐडसेंस लिपियों के साथ काम नहीं करता है।

Comments

आप क्या कहते हैं कि यह आसान है? यह भी कम नहीं है। मुझे हमेशा लगता है कि jQuery का अति प्रयोग एक बुरा विचार है।

— मंजींग

Answer 11

बस करो:

document.body.innerHTML = document.body.innerHTML + '<img src="../images/loaded.gif" alt="" onload="alert(\'test\');this.parentNode.removeChild(this);" />';

Comments

एक प्रतिभाशाली विचार की तरह देखो

— पेरी मिमोन

Answer 12

आप इस पोस्ट को देख सकते हैं । कोड इस तरह दिख सकता है:

var actualDivToBeUpdated = document.getElementById('test');
var div = document.createElement('div');
div.innerHTML = '<script type="text/javascript">alert("test");<\/script>';
var children = div.childNodes;
actualDivToBeUpdated.innerHTML = '';
for(var i = 0; i < children.length; i++) {
    actualDivToBeUpdated.appendChild(children[i]);
}

Answer 13

लैरी की स्क्रिप्ट के लिए धन्यवाद, जिसने IE10 में पूरी तरह से काम किया, यही वह है जो मैंने उपयोग किया है:

$('#' + id)[0].innerHTML = result;
$('#' + id + " script").each(function() { this.text = this.text || $(this).text();} );

Answer 14

लैरी का विस्तार। मैंने इसे पूरे ब्लॉक और बच्चों के नोड्स को पुन: खोजा।
स्क्रिप्ट अब बाहरी स्क्रिप्ट भी कहेगी जो src पैरामीटर के साथ निर्दिष्ट हैं। लिपियों को सम्मिलित करने के बजाय सिर से जोड़ दिया जाता है और उन्हें क्रम में रखा जाता है। इसलिए विशेष रूप से ऑर्डर स्क्रिप्ट संरक्षित हैं। और प्रत्येक स्क्रिप्ट को समान रूप से निष्पादित किया जाता है कि ब्राउज़र प्रारंभिक डोम लोडिंग को कैसे संभालता है। इसलिए यदि आपके पास एक स्क्रिप्ट ब्लॉक है जो एक सीडीएन से jQuery को कॉल करता है और अगले स्क्रिप्ट नोड की तुलना में jQuery का उपयोग करता है ... कोई संभावना नहीं! ओह और मैंने टैग स्क्रिप्ट में जो कुछ भी सेट किया है, उसके आधार पर क्रमांकित आईडी के साथ संलग्न स्क्रिप्ट को टैग किया है ताकि आप पा सकें कि इस स्क्रिप्ट द्वारा क्या जोड़ा गया था।

exec_body_scripts: function(body_el, tag) {
    // Finds and executes scripts in a newly added element's body.
    // Needed since innerHTML does not run scripts.
    //
    // Argument body_el is an element in the dom.

    function nodeName(elem, name) {
        return elem.nodeName && elem.nodeName.toUpperCase() ===
              name.toUpperCase();
    };

    function evalScript(elem, id, callback) {
        var data = (elem.text || elem.textContent || elem.innerHTML || "" ),
            head = document.getElementsByTagName("head")[0] ||
                      document.documentElement;

        var script = document.createElement("script");
        script.type = "text/javascript";
        if (id != '') {
            script.setAttribute('id', id);
        }

        if (elem.src != '') {
            script.src = elem.src;
            head.appendChild(script);
            // Then bind the event to the callback function.
            // There are several events for cross browser compatibility.
            script.onreadystatechange = callback;
            script.onload = callback;
        } else {
            try {
                // doesn't work on ie...
                script.appendChild(document.createTextNode(data));      
            } catch(e) {
                // IE has funky script nodes
                script.text = data;
            }
            head.appendChild(script);
            callback();
        }
    };

    function walk_children(node) {
        var scripts = [],
          script,
          children_nodes = node.childNodes,
          child,
          i;

        if (children_nodes === undefined) return;

        for (i = 0; i<children_nodes.length; i++) {
            child = children_nodes[i];
            if (nodeName(child, "script" ) &&
                (!child.type || child.type.toLowerCase() === "text/javascript")) {
                scripts.push(child);
            } else {
                var new_scripts = walk_children(child);
                for(j=0; j<new_scripts.length; j++) {
                    scripts.push(new_scripts[j]);
                }
            }
        }

        return scripts;
    }

    var i = 0;
    function execute_script(i) {
        script = scripts[i];
        if (script.parentNode) {script.parentNode.removeChild(script);}
        evalScript(scripts[i], tag+"_"+i, function() {
            if (i < scripts.length-1) {
                execute_script(++i);
            }                
        });
    }

    // main section of function
    if (tag === undefined) tag = 'tmp';

    var scripts = walk_children(body_el);

    execute_script(i);
}

Answer 15

यह कोशिश करो, यह मेरे लिए क्रोम, सफारी और फ़ायरफ़ॉक्स पर काम करता है:

var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.body.appendChild(script); 
--> logs "hi"

एक बात ध्यान देने योग्य है, यह है कि निम्नलिखित div- नेस्टेड स्क्रिप्ट नहीं चलेगी:

var script = document.createElement('div');
script.innerHTML = '<script>console.log("hi")</script>';
document.body.appendChild(script);
--> doesn't log anything

एक स्क्रिप्ट को चलाने के लिए इसे एक नोड के रूप में बनाना पड़ता है और फिर एक बच्चे के रूप में जोड़ा जाता है। आप पहले से इंजेक्ट किए गए div के अंदर एक स्क्रिप्ट भी जोड़ सकते हैं और यह चलेगा (विज्ञापन सर्वर कोड प्राप्त करने के लिए प्रयास करने से पहले मैं इसमें चला जाऊंगा):

var div = document.createElement('div');
div.id = 'test-id';
document.body.appendChild(div);
var script = document.createElement('script');
script.innerHTML = 'console.log("hi")';
document.getElementById('test-id').appendChild(script);
--> logs "hi"

Answer 16

लंबर के जवाब का खर्च

document.body.innerHTML = '<img src="../images/loaded.gif" alt="" > onload="alert(\'test\');this.parentNode.removeChild(this);" />';

आप अपनी स्क्रिप्ट बनाने और लोड करने के लिए बेस 64 इमेज का उपयोग कर सकते हैं

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMjHxIGmVAAAADUlEQVQYV2P4//8/AwAI/AL+iF8G4AAAAABJRU5ErkJggg=="
    onload="var script = document.createElement('script');  script.src = './yourCustomScript.js'; parentElement.append(script);" />

या यदि आपके पास एक है तो आप Iframeइसके बजाय इसका उपयोग कर सकते हैं

<iframe src='//your-orginal-page.com' style='width:100%;height:100%'
    onload="var script = document.createElement('script');  script.src = './your-coustom-script.js'; parentElement.append(script);"
    frameborder='0'></iframe>

Answer 17

मुझे कुछ इसी तरह की आवश्यकता थी, लेकिन मूल स्क्रिप्ट के समान स्क्रिप्ट को उसी स्थान पर बने रहने या फिर से बनाए जाने की आवश्यकता थी, क्योंकि मेरी स्क्रिप्ट DOM / स्क्रिप्ट तत्वों को बनाने के लिए DOM में स्क्रिप्ट टैग के स्थान को लक्षित करती है। मैंने यह सुनिश्चित करने के लिए स्क्रिप्ट को पुनरावर्ती भी बनाया कि यह एक स्तर से अधिक नीचे होने पर भी काम करे।

नोट: मैं constयहाँ उपयोग करता हूँ , यदि आपके पास एक पुराना ब्राउज़र है, तो बस उपयोग करें var।

    window.exec_body_scripts = function(body_el) {
        // ref: /programming/2592092/executing-script-elements-inserted-with-innerhtml based on Larry K's answer
        // Finds and executes scripts in a newly added element's body.
        // Needed since innerHTML does not run scripts.
        //
        // Argument body_el is an element in the dom.
        const
            type__Js = 'text/javascript',
            tagName__Script = 'script',
            tagName__Script__Upper = tagName__Script.toUpperCase();
        var scripts = [], script, i;
        function evalScript(elem) {
            var parent = elem.parentNode,
                data = (elem.text || elem.textContent || elem.innerHTML || ""),
                script = document.createElement(tagName__Script);

            script.type = type__Js;
            try {
                // doesn't work on ie...
                script.appendChild(document.createTextNode(data));
            } catch (e) {
                // IE has funky script nodes
                script.text = data;
            }
            // Make sure to re-insert the script at the same position
            // to make sure scripts that target their position
            // in the DOM function as expected.
            var parent = elem.parentNode;
            parent.insertBefore(script, elem);
            parent.removeChild(elem);
        };
        // Get all scripts (recursive)
        if (typeof (document.querySelectorAll) !== typeof (void 0)) {
            document.querySelectorAll('script').forEach((scr) => { if (!scr.type || scr.type.toLowerCase() === type__Js) scripts.push(scr); });
        }
        else {
            var children_nodes = body_el.childNodes, child;
            for (i = 0; children_nodes[i]; i++) {
                child = children_nodes[i];
                if (
                    child.nodeName
                    &&
                    child.nodeName.toUpperCase() === tagName__Script__Upper
                    &&
                    (
                        !child.type
                        ||
                        child.type.toLowerCase() === type__Js
                    )
                ) {
                    scripts.push(child);
                }
                // Recursive call
                window.exec_body_scripts(child);
            }
        }
        for (i = 0; scripts[i]; i++) {
            evalScript(scripts[i]);
        }
    };

Answer 18

टाइपस्क्रिप्ट में इस नए हेल्पर फ़ंक्शन को बनाया, शायद कोई इसकी सराहना करेगा। यदि आप स्क्रिप्ट पैरामीटर से टाइप डिक्लेरेशन हटाते हैं तो यह सिर्फ प्लेन JS होगा।

const evalPageScripts = () => {
  const scripts = document.querySelectorAll('script');

  scripts.forEach((script: HTMLScriptElement) => {
    const newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = script.src;

    if (script.parentNode) {
      script.parentNode.removeChild(script);
    }

    return document.body.appendChild(newScript);
  })
};

export default evalPageScripts;

Answer 19

फ़ंक्शन eval () आज़माएं।

data.newScript = '<script type="text/javascript">//my script...</script>'
var element = document.getElementById('elementToRefresh');
element.innerHTML = data.newScript;
eval(element.firstChild.innerHTML);

यह एक परियोजना से एक वास्तविक उदाहरण है जिसे मैं विकसित कर रहा हूं। इस पोस्ट के लिए धन्यवाद

Answer 20

यहाँ एक हालिया परियोजना में मेरा समाधान है।

<!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>