Incluir dinámicamente archivos .js & .css

Utilidad: Incluir y remover dinámicamente archivos .js y .css en la etiqueta, <head> del html, desde un arreglo con formato JSON. Esta funcionalidad es apropiada cuando implementas, en tu arquitectura de software, una plantilla principal o layout único y necesitas incluir los archivos (.js y/o .css) respectivos de una página, formulario o módulo en particular, desde un archivo de configuración ( JSON ).


El siguiente código es el archivo index.html

Observe que también haremos referencia a 2 archivos:

Y una vez que esté cargada en su totalidad la página web, es decir, que el DOM.ready() esté listo, se incluirán dinámicamente 6 archivos más:

Las características de estos últimos 6 archivos, son enviadas como parámetro (ruta, tipo y nombre), en un arreglo con formato JSON a través de la variable aObjs a la función includeGroup(), la cual se ejecutará apenas este listo el DOM.ready(). Note también que estos últimos archivos están en un nivel de directorio más adentro respectivamente.

Para observar mejor el ejemplo, puede remover dichos archivos, cuando invoca la función removeGroup() desde el botón Remover.

La función includeGroup() y removeGroup() están declarada en el archivo include.js

index.html

 <!DOCTYPE html>
 <html>
 <head>
 <title>JavaScript & JSON</title>
 <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
 <script src="dom.js"></script>
 <script src="include.js"></script>
 <script>

     var aObjs = [
                   { "path":"js/" , "typ":"js"  , "arc":"fileYellow" },
                   { "path":"css/", "typ":"css" , "arc":"fileYellow" },
                   { "path":"js/" , "typ":"js"  , "arc":"fileBlue"   },
                   { "path":"css/", "typ":"css" , "arc":"fileBlue"   },
                   { "path":"js/" , "typ":"js"  , "arc":"fileRed"    },
                   { "path":"css/", "typ":"css" , "arc":"fileRed"    }
     ];

     DOM.ready( function() {
         includeGroup(aObjs);
     } );

 </script>
 </head>
 <body>
 <h1>Ej.: Incluir y Remover Archivos (.js & .css) Dinámicamente a Partir de Arreglo JSON</h1>
 <section id="contenido">
     <div id="pElements"></div>
     <button type=button onClick="document.location.reload(true);">Recargar</button>
     <button type=button onClick="document.getElementById('pElements').innerHTML='';removeGroup(aObjs);">Remover</button>  
 </section>
 </body>
 </html>


Si aún no tiene conocimiento de la funcion DOM.ready() ubicada en el erchivo dom.js le recomendamos que la conosca.

Su utilidad es la de ejecutar funciones, una vez cargada en su totalidad una página web ( Document Object Model ).


El siguiente código es el archivo include.js. En este archivo están declaradas 2 funciones:

  • includeGroup() Incluiye dinámicamente archivos .js y .css en la etiqueta, <head> del html, a partir del arreglo JSON dado.

  • removeGroup() Remueve dinámicamente archivos .js y .css en la etiqueta, <head> del html, a partir del arreglo JSON dado.

Ambas funciones reciben como parámetro el arreglo JSON con las características de cada uno de los archivo (ruta, tipo y nombre).

include.js

 function includeGroup( arr )
 {

     this.include = function( fileType, fileName )
     {

         this.createJsCssFile = function( fileName , fileType )
         {

             if (fileType == "js") {
                 var fileRef = document.createElement( 'script' );
                 fileRef.setAttribute( "type","text/javascript" );
                 fileRef.setAttribute( "src", fileName );
             } else if ( fileType == "css" ) {
                 var fileRef = document.createElement( "link" );
                 fileRef.setAttribute( "rel", "stylesheet" );
                 fileRef.setAttribute( "type", "text/css" );
                 fileRef.setAttribute( "href", fileName );
             }

             return fileRef;

         }

         var fileRef = createJsCssFile( fileName, fileType );

         if ( typeof fileRef != "undefined" )
             document.getElementsByTagName("head")[0].appendChild( fileRef );

     }

     var arrLen = arr.length;

     for ( var i = 0; i < arrLen; i++ )
         include( arr[i]["typ"] , arr[i]["path"] + arr[i]["arc"] + "." + arr[i]["typ"] );

 }

 function removeGroup( arr )
 {

     this.removeJsCssFile = function( fileName , fileType )
     {

         var targetElement = ( fileType == "js" ) ? "script" : ( fileType == "css" ) ? "link" : "none";
         var targetAttr = ( fileType == "js" )? "src" : ( fileType == "css" ) ? "href" : "none";
         var allSuspects = document.getElementsByTagName( targetElement );
         for ( var i = allSuspects.length; i >= 0; i-- ) {
             if ( allSuspects[i]
             && allSuspects[i].getAttribute( targetAttr ) != null
             && allSuspects[i].getAttribute( targetAttr ).indexOf( fileName ) != -1 )
                 allSuspects[i].parentNode.removeChild( allSuspects[i] );
         }

     }

     var arrLen = arr.length;

     for ( var i = 0; i < arrLen; i++ )
         removeJsCssFile( arr[i]["path"] + arr[i]["arc"] + "." + arr[i]["typ"], arr[i]["typ"] );

 }


El siguiente código es el archivo fileYellow.js, ubicado en un nivel de directorio más adentro llamado 'js'.

Dicho archivo contiene una función que se autoinvoca a si misma.

Esta función crea un elemento <p> al cual se le anexa un nodo que contiene la cadena de texto:

"Los archivos "fileYellow.js" y "fileYellow.css" imprimen negro / amarillo."

También, se le establece la clase classYellow antes de ser anexado al elemento que tiene el id = "pElements".

js/fileYellow.js

 (function () { // I will invoke myself
     var nodo = document.createTextNode( 'Los archivos "fileYellow.js" y "fileYellow.css" imprimen negro / amarillo.' ); 
     var element = document.createElement( 'p' );
     element.setAttribute( 'class' , 'classYellow' );
     element.appendChild( nodo );
     document.getElementById( 'pElements' ).appendChild( element );
 })();


El siguiente código es el archivo fileBlue.js, ubicado en un nivel de directorio más adentro llamado 'js'.

Dicho archivo contiene una función que se autoinvoca a si misma.

Esta función crea un elemento <p> al cual se le anexa un nodo que contiene la cadena de texto:

"Los archivos "fileBlue.js" y "fileBlue.css" imprimen blanco / azul."

También, se le establece la clase classBlue antes de ser anexado al elemento que tiene el id = "pElements".

js/fileBlue.js

 (function () { // I will invoke myself
     var nodo = document.createTextNode( 'Los archivos "fileBlue.js" y "fileBlue.css" imprimen blanco / azul.' ); 
     var element = document.createElement( 'p' );
     element.setAttribute( 'class' , 'classBlue' );
     element.appendChild( nodo );
     document.getElementById( 'pElements' ).appendChild( element );
 })();


El siguiente código es el archivo fileRed.js, ubicado en un nivel de directorio más adentro llamado 'js'.

Dicho archivo contiene una función que se autoinvoca a si misma.

Esta función crea un elemento <p> al cual se le anexa un nodo que contiene la cadena de texto:

"Los archivos "fileRed.js" y "fileRed.css" imprimen negro / rojo."

También, se le establece la clase classRed antes de ser anexado al elemento que tiene el id = "pElements".

js/fileRed.js

 (function () { // I will invoke myself
     var nodo = document.createTextNode( 'Los archivos "fileRed.js" y "fileRed.css" imprimen negro / rojo.' ); 
     var element = document.createElement( 'p' );
     element.setAttribute( 'class' , 'classRed' );
     element.appendChild( nodo );
     document.getElementById( 'pElements' ).appendChild( element );
 })();


El siguiente código es el archivo fileYellow.css, ubicado en un nivel de directorio más adentro llamado 'css'.

Dicho archivo contiene la especificación de estilo llamada .classYellow

css/fileYellow.css

 .classYellow
 {
     background: yellow;
     color: black;
 }


El siguiente código es el archivo fileBlue.css, ubicado en un nivel de directorio más adentro llamado 'css'.

Dicho archivo contiene la especificación de estilo llamada .classBlue

css/fileBlue.css

 .classBlue
 {
     background: blue;
     color: white;
 }


El siguiente código es el archivo fileRed.css, ubicado en un nivel de directorio más adentro llamado 'css'.

Dicho archivo contiene la especificación de estilo llamada .classRed

css/fileRed.css

 .classRed
 {
     background: red;
     color: black;
 }


He aquí el ejemplo:


Tool developed at revolution, under free software. Copyleft 2017.