En este artículo, aprenderemos cómo obtener un archivo JavaScript (.js) y cargarlo dinámicamente en un navegador web usando JavaScript con HTML. Necesitamos un navegador web, es decir, Chrome (recomendado) o la aplicación Electron. A veces necesitamos agregar un script en el documento según el requisito de la interfaz de usuario que no se puede hacer en la carga de la página predeterminada.
Este artículo trata sobre cómo obtener un archivo JS desde cualquier enlace jQuery (CDN) o archivo React en el modelo de objetos del documento.
Acercarse :
- Cree un nuevo elemento de secuencia de comandos.
let newscript = document.createElement('script'); - Proporcione la fuente al elemento de secuencia de comandos recién creado.
newscript.src = document.getElementById("source").value; - Agregue el elemento en el encabezado del DOM para que pueda ejecutar el script.
document.head.appendChild(newscript)
El enfoque anterior se implementa a continuación en el ejemplo al considerar los siguientes recursos de archivo como, por ejemplo, secuencias de comandos que se cargan dinámicamente.
Recursos: puede usar este enlace CDn en el campo de entrada para obtenerlo.
-
CDN JQuery:
https://code.jquery.com/jquery-3.5.1.js
-
Reaccionar CDN:
https://unpkg.com/react@17/umd/react.development.js https://unpkg.com/react-dom@17/umd/react-dom.development.js
-
Guión personalizado:
https://graphicalstructure.codes/Geeks.js
Nota: Usaremos estos archivos. (El usuario puede utilizar cualquier fuente según sus necesidades).
Ejemplo :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
</head>
<body>
<input type="text" id="source" style="width: 60%"
placeholder="Enter the link of source." />
<button id="loadscript">Fetch and Load!</button>
<script>
document.getElementById("loadscript")
.onclick = function getScript() {
let newscript =
document.createElement("script");
newscript.src = document
.getElementById("source").value;
document.head.appendChild(newscript);
};
</script>
</body>
</html>
Salida: La siguiente salida muestra la carga dinámica de archivos JavaScript.
- CDN de jQuery:
- Cargando dinámicamente ReactJS:
- cargando JS personalizado:
Notas:
- El usuario puede usar cualquier evento en el elemento para cargar el script. En este articulo. Se ha utilizado el evento
«onclick» . - Los scripts no deben contener errores; de lo contrario, pueden arrojar errores y provocar la detención inmediata de la ejecución del código.
- Use el manejo de errores adecuado para que la ejecución del código no se interrumpa si se produce algún error durante la recuperación.
- La implementación anterior también es válida para ElectronJS.
Publicación traducida automáticamente
Artículo escrito por therain0605 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA