Generalmente, los archivos CSS y JS se incluyen de forma estática con código HTML. Significa que están escritos en el script o en la etiqueta del enlace en el código HTML . Pero esto ralentiza la ejecución ya que una gran cantidad de código se carga innecesariamente. Puede o no usar la funcionalidad relacionada con ese elemento DOM . De manera dinámica, cargamos los archivos CSS y JS durante el tiempo de ejecución cuando necesitamos su funcionalidad.
Cargue archivos CSS y JS dinámicamente: creamos un elemento de secuencia de comandos para el archivo JS y un elemento de enlace para el archivo CSS según sea necesario usando DOM, les asignamos los atributos apropiados y luego agregamos el elemento a la ubicación deseada dentro del árbol del documento usando el elemento.append()método.
Veamos en detalle todo el proceso a través de un pequeño proyecto, paso a paso.
Paso 1: Cree un archivo index.html y un archivo app.js. Este sería nuestro archivo HTML a través del cual demostraremos la carga dinámica de archivos JS y CSS. El archivo app.jscontendría la funcionalidad para llamar dinámicamente a la carga de los archivos. Lo agregaríamos estáticamente en nuestro archivo HTML.
En nuestro archivo HTML, hemos creado dos divs dentro de un div HTML . El div HTML superior contiene un encabezado y un botón para mostrar mensajes. La funcionalidad para mostrar mensajes se agregaría dinámicamente. Inicialmente, el botón no funcionaría. En el div inferior , tenemos dos botones, uno para cargar el archivo CSS y otro para el archivo JS de forma dinámica. Las funciones onClick para estos botones se definen en el archivo app.js.
Estructura del archivo:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic</title> <!-- the static loading of app.js file--> <script src="app.js"></script> </head> <body> <div> <div id="upper"> <!-- The message will change on successful execution of View button--> <h3 id="mssg"> We are here to learn how to load CSS and JS file dynamically </h3> <!-- The message() function is in script.js file --> <button onclick="message()"> View Message </button> </div> <br> <!-- This div would disappear after view message is successfully executed--> <div id="lower"> <!-- The loadCSS would load the styles.css file --> <button onclick="loadCSS()"> Load CSS </button> <!-- The loadJS would load the script.js file--> <button onclick="loadJS()"> Load JS </button> </div> </div> </body> </html>
En el archivo app.js , tenemos dos funciones loadJS() y loadCSS() que son atributos onClick de los dos botones definidos en el div HTML inferior en el archivo HTML.
Para la carga dinámica de archivos,
- Creamos el elemento requerido usando document.createElement( <nombre del elemento>)
- Luego definimos/asignamos los atributos como el script. src y guión. tipo _
- Agregamos el elemento al encabezado usando document.getElementsByTagName(‘head’)[0].append( <element variable>)
La implementación práctica de los pasos anteriores se muestra a continuación en el código. También usamos el método de string indexOf() para verificar que no agregamos repetidamente el mismo archivo al hacer clic varias veces en el botón.
app.js
// The string stores the name of files added till now
var filesAdded = '';
// For loading JS file
function loadJS(){
// Gives -1 when the given input is not in the string
// i.e this file has not been added
if(filesAdded.indexOf('script.js') !== -1)
return
// Head tag
var head = document.getElementsByTagName('head')[0]
// Creating script element
var script = document.createElement('script')
script.src = 'script.js'
script.type = 'text/javascript'
// Adding script element
head.append(script)
// Adding the name of the file to keep record
filesAdded += ' script.js'
}
// To load CSS file
function loadCSS() {
if(filesAdded.indexOf('styles.css') !== -1)
return
var head = document.getElementsByTagName('head')[0]
// Creating link element
var style = document.createElement('link')
style.href = 'styles.css'
style.type = 'text/css'
style.rel = 'stylesheet'
head.append(style);
// Adding the name of the file to keep record
filesAdded += ' styles.css'
}
Paso 2: ahora cree un archivo styles.css , que se cargará dinámicamente. Este archivo contiene el código para proporcionar border , margin, padding y background-color a los dos divs HTML por separado usando sus id.
styles.css
#upper{
border: 2px solid red;
margin: 10px;
padding: 15px;
background-color: aqua;
align-items: center;
}
#lower{
border: 2px solid green;
margin: 10px;
padding: 15px;
background-color: greenyellow;
align-items: center;
}
Paso 3: ahora crearíamos un archivo script.js que mostraría un mensaje editando el elemento h3 al hacer clic en el botón Ver mensaje y desaparecer el div inferior o cambiar su propiedad de visualización a none . Este archivo JS se cargaría dinámicamente.
script.js
function message() {
// Get the h3 element
var h3 = document.getElementById('mssg')
// Changed it's text, colour
h3.innerText = 'CONGRATS!! You have learnt'
h3.style.color = 'red'
// Get the lower div
var div = document.getElementById('lower')
// Disappear mode
div.style.display = 'none'
}
Paso 4: ahora copie la ruta completa del archivo index.html y cárguelo en su navegador. Inicialmente, el botón etiquetado Ver mensaje daría el error. Cuando haga clic en el botón cargar CSS , aparecerá el estilo y después de hacer clic en el botón cargar JS , el botón Ver mensaje se volverá funcional.
Producción:
Entonces, así es como puede manejar la carga dinámica de archivos usando DOM Manipulation. Es muy útil ya que aumenta la velocidad y aporta robustez.
Publicación traducida automáticamente
Artículo escrito por devrajkumar1903 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA