Tengo una función de script java test1.js. La función carga scripts externos bajo demanda y los inyecta en el encabezado. Como parte de la documentación del proveedor, necesitamos cargar algunos scripts en el encabezado html y uno de los scripts externos se carga de la siguiente manera
<script>esmDefine(["https://website1.com/web1-component.js"]);</script>
Quiero hacer lo mismo en java script e inyectar la línea anterior en la etiqueta html.
Intenté lo siguiente
let scriptElement = document.createElement('script') scriptElement.textContent = 'esmDefine(["https://website1.com/web1-component.js"])' document.getElementsByTagName('head')[0].appendChild(scriptElement);
Intenté scriptElement.innerText, scriptElement.innerHtml, etc. pero nada funcionó como se esperaba.
El resultado esperado será
<html> <head> <script> esmDefine([ "https://website1.com/web1-component.js", ]); </script> ... </head>Se agradece cualquier idea al respecto
Supongo que está enfrentando este problema porque está tratando de agregar una etiqueta de script en su etiqueta principal, que tiene una llamada de función dentro, así que tan pronto como su etiqueta de script se inserta en el encabezado de su página, la página intenta para ejecutar la función esmDefine . Pero debe haber algún otro archivo de script externo que lo tenga definido, ya que está diciendo que no lo ha definido en ninguna parte por su cuenta. Luego, para que esta función se ejecute, la declaración base para esto debe presentarse allí, quiero decir que el procesador de JavaScript de la página debe saber cómo ejecutar esta función y el archivo que tiene esta definición de funciones, es un archivo de script externo al que se vinculó. su página, pero la forma en que funciona la representación de JavaScript es que primero analiza la página (HTML, CSS, JavaScript (todo lo que hay en la página)), que ha agregado como en línea a la página, no los archivos externos. Luego, cuando todo termina de cargarse, continúa buscando las referencias externas y las agrega más tarde al modelo de objetos CSS y al modelo de objetos JavaScript. Pero dado que está agregando esta llamada de función como interna a su página, inmediatamente intentará ejecutarla y fallará ya que la definición de esta función (el archivo de script externo) aún no está cargada. Puede intentar agregar esta etiqueta de secuencia de comandos (con su esmDefine) al encabezado de su página dentro del detector de eventos de carga de la ventana . Esto se activará solo cuando todo en la página, incluidos los recursos externos dependientes, termine de cargarse en la página. De esta manera, no encontrará este ReferenceError no definido.
Espero que esto te ayude a seguir adelante.
Si desea importar un script js en una etiqueta de script, creo que podría importarlo o usar un src="" si no necesita interactuar con el script y saber cómo se comporta.
Tal vez intente algo como:
<html> <head> <script> import esmDefine from 'https://website1.com/web1-component.js' // esmDefine() ? </script> ...o :
<html> <head> <script> import { esmDefine } from 'https://website1.com/web1-component.js' // esmDefine() ? </script> ...o :
<html> <head> <script src='https://website1.com/web1-component.js'/> ...