Estoy tratando de importar la biblioteca interactjs desde un cdn. Funciona si agrega una etiqueta de script desde el encabezado. Sin embargo, quiero poder cargar esta biblioteca usando JavaScript y llevarla al alcance.
ejemplo en el siguiente 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);ninguna de las técnicas mencionadas en el artículo funcionó https://levelup.gitconnected.com/how-to-load-external-javascript-files-from-the-browser-console-8eb97f7db778
¿Es un problema con esta biblioteca en particular?
También intenté importarlo desde la consola de Chrome y tampoco funcionó. Creo que debería haber una manera de cargar bibliotecas de terceros y ponerlas en el alcance sin tener que agregar etiquetas de script en el encabezado.
Cuando agrega una etiqueta <script> a DOM, no se carga instantáneamente. Y el navegador no detiene la ejecución del script actual hasta que se carga la etiqueta y se evalúa/ejecuta su contenido.
Para retrasar la ejecución de las siguientes líneas de código hasta que se haya cargado el script, colóquelas dentro de una función y especifique el nombre de esa función como atributo de carga del onload .
Véalo funcionando:
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>