Rufen Sie die Javascript-Funktion auf, nachdem das Skript geladen wurde

Ich habe eine HTML-Seite, auf der ich HTML dynamisch über ein Javascript wie unten anhänge

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

Ich möchte eine js-Funktion aufrufen, z. B. loadContent (); Sobald das obige Skript dynamisches HTML hinzufügt.

Kann mir jemand helfen, wie ich das machen kann?

Sie können dies erreichen, ohne das Javascript von head.js zu verwenden.

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

Ich hatte das gleiche Problem ... Meine Lösung (ohne jQuery):

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

Wenn Sie diesen Beitrag im Jahr 2020 lesen, sind Sie wahrscheinlich eher an Versprechen gewöhnt. Ein moderner Ansatz ist vorzuziehen, wenn entweder alle Ihre Zielbrowser ES6 unterstützen oder Sie eine Polyfüllung verwenden.

Diese Lösung funktioniert wie die Antwort von @JaykeshPatel , basiert jedoch auf 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');
  });

Sie können einige Kontextvariablen in Argumenten des resRückrufs übergeben, oder wenn Ihre Bibliothek ein globales Symbol importiert hat, können Sie dort darauf verweisen.

Da jQuery beispielsweise das $globale Symbol einführt , können Sie res($)einen lokalen Bereich dafür aufrufen und erstellen (ideal, wenn Sie TypeScript verwenden und nicht in jeder Datei eine Modulvariable deklarieren möchten, sondern auf diese Weise schreiben können const $ = await loadScript(..)).

Wenn Sie kein Argument übergeben möchten, können Sie Ihren Code einfach wie folgt kürzen:

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

versuche so etwas

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

Eigentlich könnten Sie einfach loadedContent()die letzte Zeile des Skripts einfügen, das Sie laden (was eine Art Konzept hinter JSONP ist).

Meine Antwort ist eine Erweiterung der Antwort von Jaykesh Patel . Ich habe diesen Code implementiert, um mehrere Javascript zu laden . Hoffe das hilft jemandem:

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

Schauen Sie sich head.js an . Es wird das erreichen, wonach Sie suchen, und Rückrufe bereitstellen, wenn Ihre Datei (en) erfolgreich geladen und ausgeführt wurden.

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