Appel de la fonction javascript après le chargement du script.

Question

J'ai une page html où j'ajoute du html dynamiquement à travers un javascript comme ci-dessous

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

Je veux appeler une fonction js par exemple loadedContent() ; une fois que le script ci-dessus ajoute du html dynamique.

Quelqu'un peut-il m'aider à faire cela ?

Answer 1

Vous pouvez réaliser ceci sans utiliser le javascript 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!'); 
});

Answer 2

J'ai eu le même problème... Ma solution (sans jQuery) :

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

Answer 3

Si vous lisez ce billet en 2021, vous êtes probablement plus habitué aux promesses. Une approche plus moderne est préférable si tous vos navigateurs cibles supportent ES6 ou si vous utilisez un polyfill.

Cette solution fonctionne comme suit @JaykeshPatel réponse, mais c'est basé sur Promise s :

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

Vous pouvez passer certaines variables contextuelles dans les arguments de la fonction res ou si votre bibliothèque a importé un symbole global, vous pouvez l'y référencer.

Par exemple, depuis que jQuery introduit l'option $ le symbole global, vous pouvez appeler res($) et créer une portée locale pour celle-ci (parfait si vous utilisez TypeScript et que vous ne voulez pas déclarer une variable de module dans chaque fichier, de cette façon vous pouvez écrire const $ = await loadScript(..) ).

Si vous n'avez pas l'intention de passer un argument, vous pouvez simplement raccourcir votre code comme ceci :

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

Answer 4

Essayez quelque chose comme ceci

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

En fait, vous pourriez juste mettre le loadedContent() comme dernière ligne du script que vous chargez. (ce qui est en quelque sorte le concept derrière JSONP)