Hace un tiempo ya habia publicado un script que incluia archivos javascript y css mediante el DOM, y ahora debido a un proyecto que realize la simplifique un poco, al fin y al cabo lo que se busca es la simplicidad.
La función es la siguiente:
function include(file,opt){
if(file==””) return;
//Genera una id para el archivo con el fin de evitar que se cargue 2 veces.
idfile = file.replace(location.hostname,””);
idfile = idfile.replace(location.protocol,””);
idfile = idfile.replace(“//”,””);if(document.getElementById(idfile)){ return };
if(typeof opt==”undefined”) opt = {};
if(typeof opt.cache==”undefined”) opt.cache = true;
if(typeof opt.dom==”undefined”) opt.dom = false;
if(typeof opt.type==”undefined”) opt.type = “”;ext = (opt.type!=””) ? opt.type : file.substring(file.lastIndexOf(‘.’)+1);
if(!opt.cache){
var random = new Date().getTime().toString();
if(file.indexOf(“?”)!=-1) file = file+”&”+random;
else file = file+”?”+random;
}if(opt.dom){
var head = document.getElementsByTagName(‘head’).item(0)
}switch(ext){
case “css”:
if(!opt.dom)
document.write(‘ ‘);
else{
css = document.createElement(‘link’);
css.rel = ‘stylesheet’;
css.href = file;
css.type = ‘text/css’;
css.id = idfile;
head.appendChild(css);
}
break;case “js”:
if(!opt.dom){
document.write(‘‘);}
else{
script = document.createElement(‘script’);
script.src = file; script.type = ‘text/javascript’;
script.id = idfile;
head.appendChild(script);
if(typeof opt.oncomplete!=”undefined”){
//Para IE
script.onreadystatechange = function () {if (script.readyState == ‘complete’) {
if(typeof opt.oncomplete == “function”) {
eval(opt.oncomplete());
}
}
} //
Para Firefox script.onload = function () {
if(typeof opt.oncomplete == “function”) {
opt.oncomplete();
}
}
}
} break;
}
}
Sintaxis: include(file [,opt]); Ej: include(“path/to/archive”);
Parámetros opcionales
- cache: true | false – Si se especifica false se le añade al final del archivo un numero aleatorio para que no se guarde cache en el navegador
- dom: true | false – Si se especifica true el archivo se cargará creando un nuevo elemento script o link en el DOM, si es false el archivo se cargará con un document.write
- type: js | css – este parámetro solo es necesario si el archivo a cargar tiene una extensión diferente a js o css por ej un archivo .php
- onload: funcion – en el caso de que se cargue un archivo js via DOM es posible especificar una acción al finalizar la carga del archivo.
Su uso es muy sencillo unicamente llamamos a la función pasandole como parametro el archivo que deseamos cambiar. La función include se encargará de identificar si se trata de un archivo JS o CSS y realizará la carga. La función carga los archivos utilizando el document.write como metodo predeterminado esto es ideal para proyectos en los que puede ir variando los archivos a utilizar.Ejemplo En ves de esto:
<script src=”/path/to/js.js”></script>
<script src=”/path/to/js.js”></script>
<script src=”/path/to/js.js”></script>
<script src=”/path/to/js.js”></script>
<script src=”/path/to/js.js”></script>
<script src=”/path/to/js.js”></script>
podriamos tener esto:
<script src=”/path/to/librerias.js”>
<script src=”/path/to/librerias.js”>
y en librerias.js llamarías a los include
include(“/path/to/archivo1.js”);
include(“/path/to/archivo2.js”);
include(“/path/to/archivo3.css”);
De esta manera ya no tendríamos que modificar nuestro template para ir añadiendo los scripts si no que podemos definir un solo archivo en el cual incluyéramos los scripts.
Si no deseas cargar los archivos entre <head> y</head> puedes especificar que se cargue el archivo mediante DOM.
include(“/path/to/archivo2.js”,{dom:true});
En caso de que el archivo a cargar tenga una extensión diferente a js o css tendremos que especificar el tipo de archivo a cargar ejemplo:
include(“/path/to/archivo2.php”,{type:js,dom:true,cache:false});
Como ven es realmente sencillo el utilizar esta función y para algunos proyectos puede ser algo de mucha utilidad.
Descargar Include.js