importar archivo .js dentro de JavaScript

[oskarL]

Se puede importar un archivo externo .js a traves de codigo JavaScript y poder utilizar las funciones que alli existan?

Gracias

[uamistad]

Sí se puede, no hay ningún problema. Usa algo como:

<script type="text/javascript" src="http://www.dominio.com/archivo.js"></script>

Aunque sería algo extraño hacerlo, ya que estarías dependiendo de que el servidor externo esté o no en servicio, así que te arriesgas a que si tiene una falla, tus aplicaciones no funcionarán.

[oskarL]

Me parece que no se me ha entendido bien...

Lo que quiero es poder importar un archivo dentro del propio JavaScript, es decir, algo asi:

Código:

<script language="JavaScript" type="text/JavaScript">
       alert("Hola");
       //posible sentencia de importacion para el archivo xxx.js
       mostrar_mensaje(); //Funcion que se encuentra en xxx.js
</script>

Seguramente me direis, "pues importa en html directamente!", pero yo lo que quiero es importar dentro de JavaScript, porque necesito las funciones de un archivo .js en otro archivo .js

Espero que ahora se haya entendido lo que busco, jeje

Edito: Aclarar que cuando digo "externo", me refiero a la propia pagina, no al servidor

[oskarL]

Seguro que no se puede importar un archivo .js dentro del propio codigo JavaScript?

[programeitor]

hola,

Si se va a cargar mientras se carga la pagina se puede con:

document.write("<script type='text/javascript' src='archivo.js'></script"+">")

Salud.os

[oskarL]

pues no se si me convence, porque... no quedaria algo asi?

Código HTML:

<script1 type='text/javascript'>

    <script2 type='text/javascript'></script2>

</script1> 

y no se si dara error, pero yo creo que si, o que?

[programeitor]

No, para nada ,el 2º script se colocaria en la posicion del documento que en ese momento este escribiendose, si el script 1º esta en el head, el 2º se escribe en el head, pero no dentro del script nº 1.

[oskarL]

Pues parece que no me sirve eh. Lo he probado, y el codigo JavaScript del segundo archivo, en donde quiero importar funciones, comienza asi:

Código:

document.write("<script language=\"JavaScript\" type=\"text/JavaScript\" src=\"archivo1.js\"></script>");

var objeto=new funcion_enarchivo1();

En el .js archivo1, esta definida la funcion funcion_enarchivo1()

Me lanza el error:

Error: funcion_enarchivo1 is not defined
Archivo de origen: archivo2.js
Línea: n

[programeitor]

Si, el error es debido a una particularidad de document.write y la etiqueta script de cierre, si te fijas, en la linea que te puse;

document.write("<script type='text/javascript' src='archivo.js'></script"+">")

la etiqueta de cierre está "partida" ,pues de no ser asi, lanza error.

Ya te digo, si ésta instruccion "document.write" se ejecuta antes de finalizar la carga del documento , y no despues, no deberia haber ningun problema, y en todo caso hacer la asignacion "var objeto=new funcion_enarchivo1();" en el onload de la pagina:

window.onload=function(){
var objeto=new funcion_enarchivo1();
}

Espero que ahora ya si funcione el tema.

Salud.os

[oskarL]

Vale, bien, ahora parece que si, ya tengo acceso a las funciones y las variables. Gracias!!

Pero sigo teniendo un problemilla... Es posible que haya alguna incompatibilidad con AJAX?

[programeitor]

Pues no lo se, dime el problemilla mostrando el codigo

[oskarL]

Bueno, lo que tengo es un arhivo con html, y dos archivos con javascript.

Es un programilla en AJAX, y en un archivo .js tengo todo lo necesario para crear el objeto. Luego en el otro archivo .js tengo todos los detalles de ese programa. En el propio arhivo html es donde llamo a ese segundo archivo .js

El caso es que, teniendo esta funcion en el primer archivo .js, a la que llamo cuando creo oportuno:

Código:

function enviar_peticionAJAX(objAJAX, url, metodo){ 
	//Establece una conexion, y envia una peticion a la url indicada
	//Necesita el objeto XMLHttp instanciado, una url, y un metodo (GET o POST)
	objAJAX.open(metodo.toUpperCase(), url, true);
	objAJAX.onreadystatechange=cargar_datosAJAX;
	objAJAX.send(null);
}

Me dice:

Error: objAJAX.open is not a function
Archivo de origen: AJAX.js

Como si no reconociera el metodo del objeto AJAX.

Por supuesto esto solo sucede si intento incluir el archivo tal y como me recomendaste

Muchas gracias!!

[programeitor]

Si como decias tienes acceso a las funciones no veo porque la forma de incluir el 2º script pueda causar el error.

En principio el error indica que el objeto no está creado, habria que revisar si la orden de creacion del objeto a sido dada, y si la funcion de creacion del objeto devuelve un objeto.

[oskarL]

Pongo el codigo.

Este es AJAX.js, el archivo que quiero importar dentro de codigo JavaScript, el que contiene funciones.

Código:

function objetoAJAX(){ 
	//Instancia un objeto XMLHttp
   
   if (window.XMLHttpRequest) { /* Mozilla, Safari,...*/
		objAJAX = new XMLHttpRequest();
		if (objAJAX.overrideMimeType) {
			objAJAX.overrideMimeType('text/xml');
		}
	}
	else if (window.ActiveXObject) { /* IE */
		try {
			objAJAX = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {}
		try {
			objAJAX = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e) {}
	}
	return objAJAX;
}

function enviar_peticionAJAX(objAJAX, url, metodo){ 
	//Establece una conexion, y envia una peticion a la url indicada
	//Necesita el objeto XMLHttp instanciado, una url, y un metodo (GET o POST)

	objAJAX.open(metodo.toUpperCase(), url, true);
	objAJAX.onreadystatechange=cargar_datosAJAX;
	objAJAX.send(null);
}

function cargar_datosAJAX(){ 
	//Se carga al recibir una respuesta a la peticion

	if (objAJAX.readyState == 4) {
		var documento=objAJAX.responseXML;
		var raiz=documento.documentElement;
		
		if(raiz.childNodes.length==0){
			resultadoAJAX.datos=null;
		}else{
			resultadoAJAX.datos=raiz;
		}

		procesar_datosAJAX();
	}
}

Y este es el codigo en donde quiero importar ese archivo, que esta en busquedaAJAX.js

Código:

document.write("<script language=\"JavaScript\" type=\"text/JavaScript\" src=\"AJAX.js\"></script"+">");

var objetoAJAX=new objetoAJAX();

function enviar_peticion(url){
	
	enviar_peticionAJAX(objetoAJAX,url, "GET");
}

Al cargar la pagina ya me da este error:

Error: objetoAJAX is not a constructor
Archivo de origen: buscadorAJAX.js


Asi que claro, si no puede crear el objeto, por supuesto me da este otro error al utilizar la pagina:

Error: objAJAX.open is not a function
Archivo de origen: AJAX.js

[programeitor]

Para este tipo de cosas, te comente lo de dar las ordenes en el onload de la pagina:

window.onload=function(){
var objetoAJAX=new objetoAJAX();
.. otras ordenes iniciales
}

document.write("<script language=\"JavaScript\" type=\"text/JavaScript\" src=\"AJAX.js\"></script"+">");

para dar tiempo a que lea e interprete el script.

Por otra parte no veo porque no puedas cargar todos los scripts desde el head, como ya dijo uamistad al principio, de la forma:

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="buscadorajax.js"></script>

pues si vas a usar en un documento funciones de los dos scripts lo mas logico es cargarlos en el head de esa forma.

De todas formas con lo del window.onload no creo que te de problemas.

Salud.os

[oskarL]

Iniciado por programeitor

no veo porque no puedas cargar todos los scripts desde el head

No es que no pueda, es que no quiero! jeje

A ver, el archivo buscadorAJAX.js va a necesitar SIEMPRE del archivo AJAX.js, entonces lo que me gustaria es poder hacer esa importacion automaticamente, para que cuando quiera utilizar este script en una pagina, solo tenga que importar el archivo buscadorAJAX.js, y no tener que escribir la importacion de los dos. Yo creo que es entendible, vamos, jeje.

Iniciado por programeitor

Para este tipo de cosas, te comente lo de dar las ordenes en el onload de la pagina

Perdona, no te entendi bien en ese momento. Ahora que lo he probado, te puedo decir que sigue dandome error, jeje.

Bueno, este error se ha solucionado, ya no sale

Error: objetoAJAX is not a constructor
Archivo de origen: buscadorAJAX.js



Sin embargo, este otro sigue apareciendo

Error: objAJAX.open is not a function
Archivo de origen: AJAX.js

Lo he intentado tal cual me lo has escrito, y tambien declarando la variable fuera, por si acaso, jeje

var objetoAJAX;

window.onload=function(){
objetoAJAX=new objetoAJAX();
}

pero aun asi me da el error!

por cierto, Muchas Gracias por toda la ayuda!!!

[programeitor]

Vamos bien,

Pues la verdad es que es perfectamente comprensible y ademas me da una idea.

por lo que se ve, ya tenemos un error solucionado. No hay nesesidad de declarar la variable fuera.... y eso de fuera, a que se refiere? si tienes ordenes fuera de funcion(que se ejecutan al cargarse el documento) bueno revisarlas.

Y para depurar posibles errores de acceso "nulo", coloca la orden document.write al principio del script.

Ahora, por la correccion del primer error, vemos ,que objetoAJAX ya es un constructor, o al menos la llamada a la funcion no da error. Para el segundo error podrias probar ésta modificacion que hago de la funcion, para evitar dobles asignaciones, en el caso de IE, meto el segundo try dentro del primer catch. Luego si resulta que no es IE y el navegador soporta XMLHttpRequest hacemos ahi la asignacion.

A la salidad de la funcion ,podemos hacer una comprobacion para ver el resultado:


window.onload=function(){
objetoAJAX();
}
function objetoAJAX(){
var control="";
try {objAJAX = new ActiveXObject("Msxml2.XMLHTTP");control="Msxml2.XMLHTTP";}
catch (e) {
try {objAJAX = new ActiveXObject("Microsoft.XMLHTTP");control="Microsoft.XMLHTTP"; }
catch (E) {objAJAX=false;}
}
if (!objAJAX && window.XMLHttpRequest){
objAJAX = newXMLHttpRequest();control="XMLHttpRequest";
}
if (objAJAX.overrideMimeType) {
objAJAX.overrideMimeType;('text/xml');control+=" overrideMimeType";
}
alert(control);
return objAJAX;
}


Pruebala ,a ver si localizamos el error.

[oskarL]

Cuando decia "fuera" me referia a fuera del onload.

He probado esto ultimo que me has comentado, y me sigue dando el mismo error. La verdad es que ya casi me he dado por vencido, jeje. Al final creo que lo hare como siempre, e incluire siempre los dos archivos y punto, que asi funciona genial.

Muchisimas gracias programeitor!!

[programeitor]

Bueno, de veras lo siento.

Todavia queda una opcion, .ya que no puede ser en el onload, incluye la llamada a objetoAJAX(); al final, asi se supone ya habra leido tanto ese script como el cargado al principio con document.write.,

Quedaria algo asi el script:

//inicio del script
document.write(2º archivo ajax)
//funciones
.
.
.
llamada a objetoAJAX();
// fin del script

[Kevormagic]

FUNCIONA 100% EN TODOS LOS NAVEGADORES... ESTA TOMADO DE GOOGLE... ASI QUE NO ME VENGAN CON "NO ANDA"... EN ESE CASO APRENDE JAVASCRIPT.

LA PRIMER PARTE ES DEL TRADUCTOR DE GOOGLE... LA FUNCION F Y MYJSLOAD SON LAS RESPONSABLES.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es',
includedLanguages: 'af,ar,zh-CN,zh-TW,nl,en,tl,fi,fr,de,el,iw,hi,id,it,ja,ko,no,fa,pt ,ro,ru,th,tr'
}, 'google_translate_element');
}
</script>


<script>

function f(b){
e=document;
var a=e.getElementsByTagName("head")[0];
a|| (a=e.body.parentNode.appendChild(e.createElement(" head")));
a.appendChild(b)}function _loadJs(b){var a=e.createElement("script");
a.type="text/javascript";a.charset="UTF-8";a.src=b;f(a)
}

function MyloadJs(b){
e=document;
var a=e.createElement("script");
a.type="text/javascript";
a.charset="UTF-8";
a.src=b;
f(a)
}

function cargarTraductor(){
MyloadJs("http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit")

}

</script>

<input type="BUTTON" value="TRADUCTOR" onclick="cargarTraductor()" />

[JavierB]

Hola Kevormagic

Te recuerdo el aviso que había al final de este tema y que parece que no has leído o no le has hecho ni caso.



Tema cerrado.