Tengo un problema cuando intento cargar un js externo y ejecutar una función dentro una vez que se crea la etiqueta del script. En el código myFile.js tengo este código:
function loadMyScript() { return new Promise(function (resolve, reject) { var s; s = document.createElement("script"); s.defer = true; s.id = "test"; s.src = "myUrl/externalfile.min.js"; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); }); }En el mismo archivo, intento llamar a loadMyScript y me gustaría que se creara un nuevo objeto a partir del código de mi js externo: myUrl/externalfile.min.js
async function testMethod(button, objet) { //new myObjet(button, objet) will be called in myUrl/externalfile.min.js return this.loadMyScript().then(() => { console.log('Buildin MyObject'); return new MyObjet(button, objet); }); }en mi html generado veo esto. Aquí mi método loadMyScript crea correctamente el elemento html en:
<script defer="" id="test" src="myUrl/externalfile.min.js"></script>El problema es que el código que escribí en .then(...) no parece ejecutarse => MyObject no se crea.
Mientras que cuando inserto la línea <script> manualmente en el encabezado html, todo parece funcionar correctamente
¿Algún consejo?
Según tengo entendido, desea cargar JavaScript dinámicamente, desde un archivo externo y llamar a una función de ese archivo directamente después.
¿Por qué no usas import() para eso? En lugar de agregar una etiqueta de script al DOM, declara su archivo JS simplemente como un módulo y lo llama dentro de su archivo JS actual a través de la función import() . Es compatible con todos los principales navegadores.
export function hello() { return "Hello, from Module.js"; } import("./path/to/module.js") .then((module) => { console.log( module.hello() ); // Do something with the module. });Puedes leer un poco más en la página de MDN para importaciones .
El uso de onload y onerror generalmente ya no se considera "mejor práctica"; en su lugar, podría adjuntar detectores de eventos a su elemento creado:
function loadMyScript() { return new Promise(function(resolve, reject) { var s = document.createElement("script"); s.defer = true; s.id = "test"; s.src = "myUrl/externalfile.min.js"; s.addEventListener('load', () => resolve(s), false); s.addEventListener('error', () => reject(s), false); document.head.appendChild(s); }); }Cada vez que ejecuta testMethod , en realidad está devolviendo una Promise , lo que significa que debe usar .then en él (o await si su función es asíncrona).
Eche un vistazo a este ejemplo donde se carga un script externo llamado js.js :
js.js en la misma carpeta que este fragmento (una vez guardado en su computadora local) function loadMyScript() { return new Promise(function (resolve, reject) { let s = document.createElement("script"); s.src = "js.js"; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); }); }; async function testMethod() { return loadMyScript().then(() => func(50), (e) => console.log("Error:", e)); }; function RUN_THIS() { testMethod().then(res => { if(!res) return; alert("Loaded script, executed function. The external function returned: " + res); }); }; Para que el código sea más legible, he usado await a continuación:
function loadMyScript() { return new Promise(function (resolve, reject) { let s = document.createElement("script"); s.onload = resolve; s.onerror = reject; s.src = "js.js"; document.head.appendChild(s); }); }; async function testMethod() { const result = await loadMyScript(); // Now perform checks using "result"; return func(50); }; async function RUN_THIS() { const result = await testMethod() if(!result) return false; console.log("Loaded script, executed function. The external function returned:", result); }; Aquí, func es la función o el método que se define en el script externo que está intentando cargar.