import third-party library from cdn using inline JavaScript

Question

I am trying to import the interactjs library from a cdn. It works if you add a script tag from the head. However I want to be able to load this library using JavaScript and bring it to scope.

example in the following codepen: https://codepen.io/ta32/pen/abLgyGW?editors=1111

  script.type = "text/javascript";
  script.src = "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js";
  document.head.appendChild(script);
  eval(script);

non of the techniques mentioned in the articled worked https://levelup.gitconnected.com/how-to-load-external-javascript-files-from-the-browser-console-8eb97f7db778

Is it an issue with this particular library?

I also tried importing it from the chrome console and it didn't work either. I think there should be a way to load third-party libraries and bring them into scope without having to add script tags in the head.

Answer 1

When you add a <script> tag to DOM, it doesn't load instantly. And the browser doesn't halt current script's execution until the tag has been loaded and its contents evaluated/run.

To delay execution of the next lines of code until after the script has loaded, place them inside a function and specify that function's name as the script's onload attribute.

See it working:

 const myFunc = () => { const position = { x: 0, y: 0 }; interact('.draggable').draggable({ listeners: { start(event) { console.log(event.type, event.target) }, move(event) { position.x += event.dx position.y += event.dy event.target.style.transform = `translate(${position.x}px, ${position.y}px)` }, } }) }; const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js'; script.onload = myFunc; document.head.appendChild(script);

 .draggable { width: 25%; min-height: 6.5em; margin: 1rem 0 0 1rem; background-color: #29e; color: white; border-radius: 0.75em; padding: 4%; touch-action: none; user-select: none; }

 <div class="draggable"> Draggable Element </div>