AJAX कॉल के बाद आंतरिक स्क्रिप्ट द्वारा इंजेक्ट किया जा रहा है <script>

Question

"सामग्री" नामक एक div है:

<div id="content"></div>

यह AJAX द्वारा <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>

Comments

आप div को कैसे लोड कर रहे हैं? आपके द्वारा उपयोग की जाने वाली लाइब्रेरी पर निर्भर करता है, आप सामान्य रूप से नियंत्रित कर सकते हैं कि क्या आप अभी अजाक्स लोड के बाद स्क्रिप्ट निष्पादित करना चाहते हैं।

— बिल यांग

window.onloadएक XMTHttpRequestअन्य (php) पृष्ठ का अनुरोध करने के लिए एक वस्तु बनाने के बाद जिसमें स्क्रिप्ट सहित div की सामग्री शामिल है। मैं सादे JS के साथ ऐसा कर रहा हूं, कोई लाइब्रेरी (मेरे अपने

— लोल के अलावा

Answer 1

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

यह अन्य StackOverflow पोस्ट भी आपके लिए मददगार हो सकती है: क्या स्क्रिप्ट्स को HTML के साथ डाला जा सकता है? ।

Comments

आप सभी भरी हुई लिपियों का चयन कर सकते हैं और उन्हें eval () फ़ंक्शन द्वारा निष्पादित कर सकते हैं:$('#audit-view script').each(function (index, element) { eval(element.innerHTML); })

— Jerzy Gebler

जावास्क्रिप्ट को पेज पर जोड़ा जाता है जिसे बिल्कुल निष्पादित करना चाहिए। ( jsfiddle.net/wnn5fz3m/1 उदाहरण के लिए)। सवाल यह है कि यह कभी-कभी क्यों नहीं होता है?

— NoBugs

@ चोकुला मैं अपनी स्क्रिप्ट को एक अलग फ़ाइल में स्थानांतरित कर दिया फिर भी यह आंशिक रूप से काम नहीं कर सकता है क्या आप इसके साथ मदद कर सकते हैं? stackoverflow.com/questions/42941856/…

— सेमरा

FYI करें (@NoBugs मुझे एक सुराग देता है)। मैंने सादे javascirpt element.innerHTML = zzz और desnt काम की कोशिश की। फिर मैं Jquery $ (तत्व) .html (zzz) और काम करने की कोशिश करता हूँ।

— gtryonp

Answer 2

मैंने इस कोड का उपयोग किया है, यह ठीक काम कर रहा है

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div

Comments

यदि आप मुझसे पूछें, तो यह स्वीकार किए जाने वाले से बेहतर उत्तर है। यह बहुत अधिक जावास्क्रिप्ट इंजेक्शन है।

— Xedret

उपयोगी होते हुए भी, यह वास्तव में इस प्रश्न का उत्तर नहीं देता है कि स्क्रिप्ट क्यों नहीं चलेगी। उदाहरण के लिए देखें jsfiddle.net/fkqmcaz7 और jsfiddle.net/wnn5fz3m/1 यह बिल्कुल चलना चाहिए, और मुझे यह काम नहीं करने का कोई सरलीकृत मामला नहीं मिल रहा है।

— NoBugs

@NaoiseGolden ओपी सचमुच स्क्रिप्ट निष्पादन के बारे में पूछ रहा है, इसलिए मुझे लगता है कि यह यहां ठीक है। :-)

— thedayturns

Eval () की अत्यधिक अनुशंसा नहीं की जाती है। इसे देखें - stackoverflow.com/questions/9107847/…

— किंग्स

Answer 3

यदि आप इस तरह से अजाक्स के माध्यम से अपने div के भीतर एक स्क्रिप्ट ब्लॉक लोड करते हैं:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something
    }
    myFunction();
    </script>
</div>

... यह केवल आपके पेज के DOM को अपडेट करता है, myFunction () जरूरी नहीं कि बुलाया जाए।

आप एक Ajax कॉलबैक विधि का उपयोग कर सकते हैं जैसे कि jQuery के ajax () में एक पद्धति में से एक यह परिभाषित करने के लिए कि अनुरोध के पूरा होने पर क्या निष्पादित किया जाए।

आप जो कर रहे हैं वह जावास्क्रिप्ट के साथ एक पृष्ठ को लोड करने से अलग है जिसमें इसे गेट-गो (जिसे निष्पादित किया जाता है) से शामिल किया गया है।

कुछ सामग्री लाने के बाद सफलता कॉलबैक और त्रुटि कॉलबैक का उपयोग कैसे करें, इसका एक उदाहरण:

  $.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 या अन्य पुस्तकालय का उपयोग नहीं करना चाहते हैं, तो किसी भी स्क्रिप्ट कोड को निष्पादित करने के लिए eval () का उपयोग करने का एक और त्वरित और गंदा तरीका है ।

Comments

jQuery के कॉलबैक का उपयोग करते हुए, मैं नए <स्क्रिप्ट> के अंदर कोड को "निष्पादित" कैसे कर सकता हूं?

— JCOC611

मैंने सफलता कॉलबैक का उपयोग करने का एक उदाहरण जोड़ा:

— क्रिस्टोफर टोकर

आपको बहुत - बहुत धन्यवाद! "myFunction ();" भाग वह था जो मैं अपने कोड से बाहर जा रहा था।

— जेसन

Answer 4

यहां वह स्क्रिप्ट है जो पाठ में सभी स्क्रिप्ट टैग का मूल्यांकन करेगी।

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

सर्वर से अपना HTML प्राप्त करने के बाद बस इस फ़ंक्शन को कॉल करें। चेतावनी दी: का उपयोग करeval करना खतरनाक हो सकता है।

डेमो: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

Answer 5

JQuery का उपयोग करके मेरे लिए यह 'बस काम करता है', बशर्ते कि आप दस्तावेज़ में XHR- लौटे HTML को एक उपसमूह जोड़ने की कोशिश न करें। ( इस बग रिपोर्ट देखें 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/

Comments

अत्यधिक संभावना नहीं कि यह वर्तमान में समस्या का समाधान होगा, क्योंकि यह वास्तव में पुराने संस्करण jQuery के साथ एक बग था।

— NoBugs

Answer 6

यहां एक फ़ंक्शन है जिसका उपयोग आप AJAX प्रतिक्रियाओं को पार्स करने के लिए कर सकते हैं, खासकर यदि आप मिनिफाइज्ड का उपयोग करते हैं और चाहते हैं कि यह लौटा हुआ जावास्क्रिप्ट निष्पादित करें या बस स्क्रिप्ट को डीओएम में जोड़े बिना पार्स करना चाहते हैं, यह अपवाद त्रुटियों को भी संभालता है। मैंने php4sack लाइब्रेरी में इस कोड का उपयोग किया है और यह लाइब्रेरी के बाहर उपयोगी है।

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

Answer 7

यदि आप किसी ऐसी चीज़ को इंजेक्ट कर रहे हैं, जिसे स्क्रिप्ट टैग की आवश्यकता है, तो आपको एक अनियोजित वाक्यविन्यास त्रुटि मिल सकती है और अवैध टोकन कह सकते हैं । इससे बचने के लिए, अपने समापन स्क्रिप्ट टैग (ओं) में आगे की स्लैश से बचना सुनिश्चित करें। अर्थात;

var output += '<\/script>';

सेम किसी भी बंद टैग के लिए जाता है, जैसे कि फॉर्म टैग।

Answer 8

मैं यहाँ एक परिचित पोस्ट था, जोड़ के बिना ajax लोड पर addEventListener लोड

मैंने इसे कैसे हल किया, यह मेरे स्टेटचेंज फ़ंक्शन के फंक्शंस में कॉल सम्मिलित करने के लिए था। मेरे पास जो पेज था, वह 3 बटन था जो 3 अलग-अलग पेजों को कंटेंट में लोड करेगा। क्योंकि मुझे यह जानना था कि पेज 1, 2 या 3 को लोड करने के लिए कौन सा बटन दबाया जा रहा है, मैं आसानी से उपयोग कर सकता हूं कि यह निर्धारित करने के लिए कि कौन सा पेज लोड किया जा रहा है और फिर कौन सा फ़ंक्शन चलना है। मैं जो करने की कोशिश कर रहा था वह अलग-अलग बटन श्रोताओं को पंजीकृत करने का था जो केवल तब काम करेगा जब तत्व आईडी के कारण विशिष्ट पृष्ठ लोड किया गया था।

इसलिए...

अगर (पेज 1 को लोड किया जा रहा है, तो पगेलोड = 1) फंक्शन रजिस्टर रजिस्टरस्ट्रेन 1

फिर पेज 2 या 3 के लिए भी ऐसा ही है।

Answer 9

इसने अजाक्स से प्रत्येक स्क्रिप्ट सामग्री पर कॉल करके मेरे लिए काम किया।

$.ajax({}).done(function (data) {      
    $('div#content script').each(function (index, element) { eval(element.innerHTML); 
})  

नोट: मैंने $ .ajax को पैरामीटर नहीं लिखा था जिसे आपको अपने ajax के अनुसार समायोजित करना होगा।

Answer 10

मेरा निष्कर्ष HTML है जो NESTED SCRIPT टैग की अनुमति नहीं देता है। यदि आप HTML कोड को इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं जिसमें स्क्रिप्ट टैग शामिल हैं तो काम नहीं होने वाला है क्योंकि जावास्क्रिप्ट स्क्रिप्ट स्क्रिप्ट में भी जाता है। आप अगले कोड के साथ इसका परीक्षण कर सकते हैं और आप होंगे कि यह काम नहीं करने वाला है। उपयोग का मामला यह है कि आप AJAX या समान के साथ एक सेवा को बुला रहे हैं, आपको HTML मिल रहा है और आप इसे सीधे HTML DOM में इंजेक्ट करना चाहते हैं। यदि इंजेक्ट किया गया HTML कोड SCRIPT टैग के अंदर है तो काम नहीं करने वाला है।

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

Answer 11

एक अन्य बात यह है कि पृष्ठ को स्क्रिप्ट के साथ लोड करना है:

<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
  //do something
}
myFunction();
</script>
</div>

यह पृष्ठ को लोड करेगा, फिर स्क्रिप्ट को चलाएगा और फ़ंक्शन हैंडलर को हटा देगा जब फ़ंक्शन चलाया गया है। यह अजाक्स लोड के तुरंत बाद नहीं चलेगा, लेकिन यदि आप उपयोगकर्ता को div तत्व में प्रवेश करने के लिए इंतजार कर रहे हैं, तो यह ठीक काम करेगा।

पुनश्च। जेकरी की आवश्यकता है