Include en Javascript

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:

<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:

<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.

Descargar Include.js

Otros Enlaces Relacionados:

¿Te pareció interesante la nota?, registrate a nuestro Feed para que estes al dia con las últimas notas que publicamos en WebAdictos, tambien te invitamos a explorar nuestros archivos tal vez encuentres notas y recursos que te sean de utilidad.

Si lo prefieres puedes utilizar el botón de post aleatorio para ir saltando entre nuestros contenidos.
Gracias por visitarnos.

Wednesday, 14 dAmerica/Chicago November dAmerica/Chicago 2007 a las 3:46 pm
Desarrollo, General, Javascript, Librerias, Programacion, Web | wong it!
Trackback

Matias
April 22nd, 200911:18 am

Muy buen trabajo, sobre todos para aquellos proyectos que en los que no se pueda trabajar sobre script de servidor o en los que se necesite incluir variables dinámicas a traves de php pero no se quiera hacer pasar todo el javascript a través del motor de PHP (ahorrando mucho tiempo de proceso).

Matias

Angel
May 8th, 200910:08 am

Hola, felicitaciones por dicho js, ere sun maestor del javascript. Tengo una duda, resulta que al usar esta nueva librería con la demo de la anterior me da un fallo, ya que al darle al insertar el nuevo javascript me borra todo el javascript anterior¿alguna solución?:

dejo el codigo:

Demo

Presione para cargar el archivo JS

al darle click queda así:

1alert(”Se cargo el archivo correctamente”);

¿alguna solución? un saludo

Angel
May 8th, 200910:14 am

Hola, muy buen trabajo el que hiciste, quisiera preguntarte el sisiguente problema:
he utulizado la demo de la anterior libreria, me carga el js enviado pero me elimina todo lo anterior, es decir, en el head solo queda el script nuevo y no el js include ¿alguna solución? un saludo

Funciones de PHP en Javascript, PHP.JS
June 1st, 20091:00 am

[...] Include en Javascript [...]

cbalcazar82
June 25th, 20092:07 pm

Hola, he probado tu función pero aun no consigo cargar con el include archivos .php ; es esta forma correcta de hacerlo?
***************************************************************************************

function verify(ver){
if(ver){
// Confirmed message, i.e. clicked on “Yes”
include(”borrar_cliente.php”,{type:php,dom:true,cache:false});
}
}

***************************************************************************************
en “borrar_cliente.php” solo hace un llamado a la tabla m_cliente y borra el cliente.

una consulta mas si no es mucho pedir; en tu funcion puedo hacer paso de variables?

include(”borrar_cliente.php?id_cliente=203″,{type:php,dom:true,cache:false});

o se debe hacer de otra manera?

gracias.