Carga condicional de librerías javascript

TheDawn · #1 (**permalink**) 23/06/2012, 04:18

Hola buenos días.

Mi consulta es si es posible realizar un carga condicional de librerías javascript en una página .html

El problema que tengo, es que no es un servidor web normal en un pc, lo tengo que hacer en un servidor en un aparato muy limitado que no permite php, por lo que todo se debe hacer por parte del lado del cliente, es decir javascript.

La idea es, intentar bajarse una librería javascript de un enlace en Internet.

Primero se intentara descargar esta librería. Si no se puede realizar, entonces se bajará la librería de otro enlace interno del servidor web.

Lo quiero realizar así, porque si lo descargo de Internet es mucho más rápido que la velocidad que puede servir la librería mi servidor.

Y pensareis, ¿porque no se baja la librería siempre de Internet y ya está? Pues porque los clientes que se conectan al servidor no siempre disponen de internet, ya que se pueden conectar al servidor web del aparato tanto en red local, como desde el exterior. Si se conectan del exterior, no hay problema, por definición tienen internet, pero si lo hacen desde la red local, no dispondrán de Internet.

Entonces resumiendo. Quiero saber si es posible intentar primero bajarse la librería de Internet, y si se consigue, no realizar la petición de la librería local del servidor.

Muchas gracias.

IsaBelM · #2 (**permalink**) 23/06/2012, 07:57

lo primero que has de verificar es si el usuario tiene acceso a internet. para ello puedes, con document.write(), pides que se cargue una imagen (que estará oculta con css) que esté en la web. a esta imagen le añades los evento onload() y onerror(), que invocarán a una función. si el evento que invoca a la función es onload(), a esta función le pasas el parámetro "true" y si es onerror(), le pasas "false".
en la función evalúas el parámetros y de ese modo sabes que librería ha de cargarse

para que veas como es lo de los eventos

TheDawn · #3 (**permalink**) 23/06/2012, 12:13

Gracias Isabel.

Y como hago, una vez evaluada la condición de si se ha cargado la imagen, escribir en el Head de la página el script que se debe cargar? Teniendo en cuenta que en este punto aún no puedo cargar la libreria Jquery, sólo con Javascript puro, y que el resto del contenido de la página, no se cargue hasta que esta librería este descargada, ya que la página depende de esta librería.

IsaBelM · #4 (**permalink**) 23/06/2012, 13:51

Cita:

<head>
<script type="text/javascript">document.write('<img src="img.png?'+Math.random()+'" style="display:none" onload="conexion(true);" onerror="conexion(false);" />');</script>
<script type="text/javascript">
function conexion(conectado) {
if (!conectado) { // si no hay conexión
var url = 'scriptenlocal.js';
var diana = document.getElementsByTagName('script')[2]; // el indice 2 corresponde a posión del tag script donde se cargará el archivo externo
diana.src = url; // sobrescribimos el src del tag script donde se carga el archivo externo
}
}
</script>
<script src="scriptenweb.js" type="text/javascript"></script>
</head>

no te lo garantiza al 100% ya que puede que la imagen no se cargue por alguna razón distinta a no tener acceso a internet

furoya · #5 (**permalink**) 24/06/2012, 08:53

Yo estaba seguro que había un evento para detectar si se estaba conectado, o no.

Y está, pero no anda bien.
Funciona perfecto para saber si el usuario se desconecta en el navegador ("Trabajar sin conexión"), pero para saber si se desconecta por soft de la red local (clickeando en la herramienta del SO), sólo anda en IE y Chrome, los demás tienen limitaciones. Y más si se desconecta por hard (desenchufan el cable), o si están conectados a red local, pero no a internet (que está un paso más allá).

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body onload = alfa();>

<script type="text/javascript">

function alfa() {
var bravo = navigator.onLine ? "Conectado." : "Desconectado.";
document.write("<h1>"+ bravo +"</h1>");
}

</script>

</body>
</html>

Creo que alguien dejó una manera de usarlo con una suerte de ping-pong entre dos funciones que se disparaban mutuamente un par de veces y el resultado era más efectivo para saber si el navegador arrancaba sin conexión; pero no lo encuentro.

(Muy ingenioso lo del número al azar ¿es para que no quere cacheada, verdad?)

TheDawn · #6 (**permalink**) 25/06/2012, 02:17

Muchas gracias Isabel, funciona muy bien tu idea. Sólo he tenido que crear unas modificaciones.

Código:

	<script type="text/javascript">
		document.write('<img src="urlInternet.png?'+Math.random()+'" style="display:none" onload="conexion(true);" onerror="conexion(false);" />');
	</script>
	<script type="text/javascript">
		function addJavaScript( js, onload ) {
		   var head, ref;
		   head = document.getElementsByTagName('head')[0];
		   if (!head) { return; }
		   script = document.createElement('script');
		   script.type = 'text/javascript';
		   script.src = js;
		   script.addEventListener( "load", onload, false );
		   head.appendChild(script);
		}
		function conexion(conectado) {
			if (!conectado) { 												// si no hay conexión
				addJavaScript("local.js");
			}else{
				addJavaScript("internet.js");
			}
		}
	</script>

Ahora sólo necesito, que no cargue el body hasta que esta librería esté cargada.

¿Es posible realizar esto?

IsaBelM · #7 (**permalink**) 25/06/2012, 05:32

primero permiteme hacer algunas observaciones

en addJavaScript() recoges dos valores, pero sólo envías uno. no levanta error, pero ..... para qué intentar recorgerlo

creas un nuevo elemento, lo cual no es que esté mal, pero con reasignar el valor del src de uno ya creado todo es mas rápido

usas addEventListener() y segundo valor que le pasas es "onload". no es una palabras reservada, pero mejor cambiar el nombre de la función por otro

respondiendo a tu pregunta, tanto el código que te posteé, como tu versión, se carga antes que el dom.
normalmente es al contrario. creo que tu objetivo es modificar del dom. por lo tanto, el dom ha de ser cargado antes que el script. de ese modo cuando se invoque la función "onload" el/los elementos que intentes modificar/acceder estarán cargados

Cita:

document.addEventListener('load', fnc, false);

furoya, estás en lo cierto

TheDawn · #8 (**permalink**) 25/06/2012, 08:10

La función la encontré en Internet, no es mía.

El problema tanto con tu función cómo con la mía, es que sigue cargando el body aunque no tenga del todo cargada la librería, y ese es mi problema.

Dentro de body, ejecuto varios scripts, que necesitan obligatoriamente que se haya cargado previamente el script de la cabecera.

La cosa es:

Si yo pongo de forma tradicional

Código:

<head>
       <script type='text/javascript' src='urlInternet.js'></script>
</head>

La página si espera a que se descargue para ejecutar los scripts del body que escriben parte del documento

Si yo pongo alguno de los dos scripts (el tuyo o el que encontré por Internet), se pone a descargar el script, pero en vez de esperarse, intenta ejecutar los scripts del body, y como no esta aun la libreria descargada, dan error con el firebug de que no se encuentran las funciones.

No se si me he explicado bien. Espero que si

furoya · #9 (**permalink**) 25/06/2012, 08:46

Es el problema de los que copian y pegan sin entender lo que hacen.
Ya publiqué varios comentarios sobre quienes después vienen a pedir que se los arreglemos si no andan. Y en la mayoría de los casos no andan, aunque no se note.

Lo que no me terminó de gustar es que al principio fue una "modificación" y después fue una "función encontrada en Internet". Pero ya está.

Si tienes otro juego de etiquetas de escript, TheDawn

Código:

<script type="text/javascript">	
document.write('<img src="urlInternet.png?'+Math.random() + '" style="display:none" onload="conexion(true);" onerror="conexion(false);" />');
</script>

la pones en el final del documento, antes de </body>.

O, mejor, lo agregas al final de la función que reescribe el documento.
Hasta le puedes poner un delay. Eso debería funcionar.

(Gracias IsaBelM, a veces me sorprende mi perspicacia

)

IsaBelM · #10 (**permalink**) 25/06/2012, 14:08

no puedes postergar la carga del html, pero como te indica furoya puedes postergar la invocación de las funciones con un temporizador (setTimeout)

furoya · #11 (**permalink**) 26/06/2012, 15:03

Creo que ahora entiendo mejor. Hay que cargar primero todas las librerías, y después recién el contenido del body.

Hay una manera un poco radicalizada de hacerlo, pero no está de más comentarla.

En primer lugar se ponen todas las librerías en el mismo documento *.js.

El resto de la página puede seguir cargando normalmente, pero al final del último escript, se le agrega una captura del contenido del body ya terminado, y luego que rellene otra vez el body con esa cadena.
En la práctica, estaría "(re-)cargando" el body después que los escripts.

Un asco; pero si es indispensable, nos tapamos la nariz y lo hacemos.

P.D.: sobre los eventos y propiedades que comenté antes, creo que lo que había visto era esto

https://developer.mozilla.org/es/Eve...line_y_offline

TheDawn · #12 (**permalink**) 27/06/2012, 00:28

Muchas gracias a los dos. Lo probaré y os comento