En attente d'un script chargé dynamiquement

Question

Dans mon corps de page, je dois insérer ce code à la suite d'un appel AJAX :

     <p>Loading jQuery</p>
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script>
    <p>Using jQuery</p>
    <script type='text/javascript'>
        $.ajax({
            ...
        });
    </script>

Je ne peux pas utiliser $.load() car le document est déjà chargé, donc l'événement ne se déclenche pas.

Est-ce que c'est sûr ? Sinon, comment puis-je m'assurer que le script jquery a été chargé avant que mon code généré personnalisé ne soit exécuté.

Answer 1

Ajoutez un ID à votre fichier de script afin de pouvoir l'interroger.

 <script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

Ajoutez ensuite un écouteur de charge en JavaScript

 <script>
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad(); 
  });
</script>

Answer 2

const jsScript = document.createElement('script')
jsScript.src =
  'https://coolJavascript.js'

document.body.appendChild(jsScript)

jsScript.addEventListener('load', () => {
  doSomethingNow()
})

Se chargera après l'ajout dynamique du script