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(‘<link rel="stylesheet" href="’+file+‘" id="’+idfile+‘" type="text/css"></link>’);
- 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(‘<script type="text/javascript" id="’+idfile+‘" src="’+file+‘"></script>’);
- }
- 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:
podriamos tener esto:
- <src="/path/to/include.js"></script>
- <script src="/path/to/librerias.js"> </script>
y en librerias.js llamarias a los include
- include("/path/to/archivo1.js");
- include("/path/to/archivo2.js");
- include("/path/to/archivo3.css");
De esta manera ya no tendriamos que modificar nuestro template para ir añadiendo los scripts si no que podemos definir un solo archivo en el cual incluyeramos 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.
Pingback: Incluye tus Archivos JS y CSS Cuando los necesites
Pingback: www.programame.net
Pingback: Funcion Include con Javascript | frogx.three
Pingback: Tutoriales de Photoshop, Illustrator, Ajax, CSS, Javascript
Pingback: Funciones de PHP en Javascript, PHP.JS