स्क्रिप्ट लोड होने के बाद जावास्क्रिप्ट फ़ंक्शन को कॉल करें

Question

मेरे पास एक html पृष्ठ है जहाँ मैं नीचे दिए गए जावास्क्रिप्ट के माध्यम से गतिशील रूप से html को जोड़ रहा हूँ

<script type="text/javascript" src="/myapp/htmlCode"></script>

मैं एक जेएस फ़ंक्शन को कॉल करना चाहता हूं जैसे कि लोडकंटेंट (); एक बार उपरोक्त स्क्रिप्ट डायनेमिक html जोड़ देती है।

क्या कोई मेरी मदद कर सकता है कि मैं ऐसा कैसे कर सकता हूं?

Answer 1

आप इसका उपयोग बिना head.js जावास्क्रिप्ट का उपयोग किए बिना कर सकते हैं।

function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  // only required for IE <9
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}


// call the function...
loadScript(pathtoscript, function() {
  alert('script ready!'); 
});

Comments

FYI करें: onloadIE संस्करण 9 के लिए ठीक है और बाद में - तो बस सेटिंग onloadअब शायद ज्यादातर लोगों के लिए ठीक है

— सिमोन_वेर

नोट onloadकॉलबैक मिनट की शुरुआत करेगा जब स्क्रिप्ट "LOADS" नहीं जब वास्तव में इसका निष्पादन समाप्त हो जाएगा, जो निराशाजनक है

— Ma Dude

@Maude क्या आप उस संबंध में किसी दस्तावेज का उल्लेख कर सकते हैं?

— kontrollanten

onloadजब स्क्रिप्ट नहीं समाप्त निष्पादन है हैंडलर संभवतः नहीं कहा जा सकता, क्योंकि जावास्क्रिप्ट एकल लड़ी है। इसका मतलब यह है कि onloadहैंडलर को स्क्रिप्ट शुरू करने के निष्पादन के पहले ही या तो बुलाया जा सकता है या इसके बाद उसने निष्पादन समाप्त कर दिया है। मैंने व्यक्तिगत रूप से पूर्व के मामले को कभी नहीं देखा है ... कभी भी। अगर किसी को एक प्रतिलिपि प्रस्तुत करने योग्य मामले के बारे में पता है, जहां onloadहैंडलर को पहले से बुलाया जा सकता है, तो स्क्रिप्ट निष्पादित करना शुरू कर देती है, कृपया हमें बताएं।

— GetFree

लिपियों की एक सरणी को लोड करने के लिए एक सरल विस्तार: function loadScripts (urls, callback) {var counter = 0 for (var i=0; i<urls.length; i++) { loadScript(urls[i], function () { if (++counter === urls.length) { callback() } }) } }

— श्री

Answer 2

मुझे एक ही समस्या थी ... मेरा समाधान (बिना jQuery के):

<script onload="loadedContent();" src ="/myapp/myCode.js"  ></script>

Comments

कृपया ध्यान दें: यह सख्त सीएसपी के साथ संगत नहीं होगा।

— ब्रैडली

Answer 3

यदि आप 2020 में इस पोस्ट को पढ़ रहे हैं, तो शायद आप वादों के लिए अधिक उपयोग किए जाते हैं। एक अधिक आधुनिक दृष्टिकोण बेहतर है यदि आपके सभी लक्ष्य ब्राउज़र ES6 का समर्थन करते हैं या आप एक पॉलीफ़िल का उपयोग कर रहे हैं।

यह समाधान @JaykeshPatel उत्तर की तरह काम करता है , लेकिन यह Promises पर आधारित है :

// definition
function loadScript(scriptUrl) {
  const script = document.createElement('script');
  script.src = scriptUrl;
  document.body.appendChild(script);
  
  return new Promise((res, rej) => {
    script.onload = function() {
      res();
    }
    script.onerror = function () {
      rej();
    }
  });
}

// use
loadScript('http://your-cdn/jquery.js')
  .then(() => {
    console.log('Script loaded!');
  })
  .catch(() => {
    console.error('Script loading failed! Handle this error');
  });

आप resकॉलबैक के तर्कों में कुछ प्रासंगिक चर पास कर सकते हैं , या यदि आपका पुस्तकालय कुछ वैश्विक प्रतीक आयात करता है, तो आप इसे वहां संदर्भित कर सकते हैं।

उदाहरण के लिए, चूंकि jQuery $वैश्विक प्रतीक का परिचय देता है , आप इसके res($)लिए एक स्थानीय गुंजाइश बना सकते हैं और बना सकते हैं (एकदम सही यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं और आप प्रत्येक फ़ाइल में एक मॉड्यूल चर घोषित नहीं करना चाहते हैं, इस तरह से आप लिख सकते हैं const $ = await loadScript(..))।

यदि आपको किसी तर्क को पारित करने का मतलब नहीं है, तो आप अपने कोड को इस तरह छोटा कर सकते हैं:

script.onload = res;
script.onerror = rej;

Comments

script.onLoad = res;// सरलीकृत

— कुनुकन

@ कुनकुने भी छोटा है return new Promise(res => script.onload = res)। लेकिन एक फ़ंक्शन असाइन onloadकरना पढ़ने में आसान हो सकता है और आपको समाधान पर एक तर्क पारित करने की अनुमति देता है

— क्रिस्टियन ट्राएना

Answer 4

कुछ इस तरह की कोशिश करो

var script = document.createElement('script');

if(script.readyState) {  //IE
script.onreadystatechange = function() {
  if ( script.readyState === "loaded" || script.readyState === "complete" ) {
    script.onreadystatechange = null;
    alert(jQuery);
  }
};
 } else{//others
script.onload = function() {
  alert(jQuery); 
}
}
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"
document.documentElement.appendChild(script);

Answer 5

वास्तव में आप बस loadedContent()उस स्क्रिप्ट की अंतिम पंक्ति के रूप में डाल सकते हैं जिसे आप लोड कर रहे हैं (जो JSONP के पीछे की अवधारणा की तरह है)

Answer 6

मेरा जवाब जयकेश पटेल के उत्तर का विस्तार है । मैंने कई जावास्क्रिप्ट लोड करने के लिए इस कोड को लागू किया है । आशा है कि यह किसी की मदद करता है:

// RECURSIVE LOAD SCRIPTS
function load_scripts( urls, final_callback, index=0 )
{
    if( typeof urls[index+1] === "undefined" )
    {
        load_script( urls[index], final_callback );
    }
    else
    {
        load_script( urls[index], function() {
            load_scripts( urls, final_callback, index+1 );
        } );
    }
}

// LOAD SCRIPT
function load_script( url, callback )
{
    var script = document.createElement( "script" );
    script.type = "text/javascript";
    if(script.readyState) // IE
    {
        script.onreadystatechange = function()
        {
            if ( script.readyState === "loaded" || script.readyState === "complete" )
            {
                script.onreadystatechange = null;
                callback();
            }
        };
    }
    else // Others
    {  
        script.onload = function() { callback(); };
    }
    script.src = url;
    document.getElementsByTagName( "head" )[0].appendChild( script );
    debug("javascript included: "+url);
}

// EXAMPLE  
var main = function()
{
    console.log("main function executed");
}
var js = [ "path/to/script-1", "path/to/script-2", "path/to/script-3" ];
load_scripts( js, main );

Answer 7

की जाँच करें head.js । यह तब प्राप्त होगा जब आप कॉलबैक प्रदान कर रहे हों, जब आपकी फ़ाइल सफलतापूर्वक लोड और निष्पादित हो गई हो।

Answer 8

  $.getScript("your script",function () {
      "your action";
  });