1 .
El método
2 .
La página origen
3 .
La página destino
Muchos habéis preguntado por la manera de pasar variables
Javascript entre distintas páginas. Hay más de un modo de hacerlo, y
aqui explico el que me parece más sencillo. Aquí tenéis un ejemplo.
El método
Vamos a utilizar el mismo método que se usa para pasar variables
a scripts CGI, PHP o ASP. Si os fijas en cualquier buscador, cuando
realizáis una búsqueda, la barra de direcciones se os llena de un
montón de caracteres un poco extraños, llenos de "?" y "+" por todos
lados. Bueno, pues nosotros vamos a utilizar la misma técnica.
Codificaremos nuestras variables en la URL de la dirección destino.
Es lo mismo que hace un formulario cuando utilizais el método GET.
Podeis ver un ejemplo de
cómo funciona.
Aunque, como veremos, es relativamente sencillo pasar estos valores
de una página a otra, deberemos tener en cuenta que sólo podemos pasar
variables que tengan valores, como puedans er números o cadenas, pero nunca
referencias a objetos, como son los vectores.
La página origen
Para generar la dirección destino debemos saber cómo se codifican una
lista de variables para introducirlas en una URL. Esto se hace poniendo un
símbolo de interrogación (?) detrás del nombre del archivo al que se pasan
las variables (que en nuestro caso será
destino.html). Después de ese símbolo viene
la lista de variables, separada por el símbolo ampersand (&). Cada elemento
de dicha lista consiste en el nombre de la variable, el símbolo de igualdad
(=) y el valor de la variable.
Sin embargo, y como en una URL podemos incluir muy pocos caracteres,
algunos de los valores de las variables tendrán que estar codificados. Por
ejemplo, no puede haber espacios en una dirección en formato URL. ¿Cómo incluimos
entonces los espacios de nuestras variables tipo cadena? Sustituyendolos por
%20, que es el equivalente al espacio dentro
de la codificación URL. Así por ejemplo, si tenemos dos variables llamadas
var1 y var2 cuyos
valores son, respectivamente, 3 y
"Hola, que tal", la URL resultante será:
destino.html?var1=3&var2=Hola%2C%20que%20tal
Gracias a Dios, Javascript ofrece una pareja de funciones que permiten
codificar y descodificar una cadena a formato URL. Son
escape y unescape.
Por lo tanto, ya tenemos todo lo que nos hace falta para enviar variables.
Para que sea más sencillo utilizaremos una función que, al ser llamada,
realice el envío. Esta función se llamará pasarVariables
y recibirá dos parámetros de tipo cadena. El primero contendrá el nombre
de la página a la que deseamos ir y el segundo una lista separada por comas
de las variables que deseamos enviar:
function pasarVariables(pagina, nombres) {
pagina +="?";
nomVec = nombres.split(",");
for (i=0; i<nomVec.length; i++)
pagina += nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
pagina = pagina.substring(0,pagina.length-1);
location.href=pagina;
}
El método funciona añadiendo a la variable
pagina el texto necesario para pasar las variables
y, finalmente, redirigirse a la dirección resultado de esos añadidos. Por eso, lo
primero es añadir el símbolo de interrogación. Luego crea un vector con los
nombres de las variables utilizando el método split.
El bucle añade a cada iteración el nombre de la variable, el símbolo de igualdad,
el valor de dicha variable codificado en URL y el ampersand. Por último, una vez
terminado el bucle, se borra el último ampersand que ya nos sobra.
Por fin, para utilizar esta función, la llamaremos desde un enlace:
<a href="javascript:pasarVariables('destino.html', 'var1,var2')">Pulse
aquí</a>
La página destino
Una vez que sabemos enviar las variables, tendremos que escribir también
un poco de código para recibirlas desde la página destino. Este es el código que
colocaremos en la cabecera de la página, antes que el resto del código, para
que podamos utilizar las variables cuanto antes:
cadVariables = location.search.substring(1,location.search.length);
arrVariables = cadVariables.split("&");
for (i=0; i<arrVariables.length; i++) {
arrVariableActual = arrVariables[i].split("=");
if (isNaN(parseFloat(arrVariableActual[1])))
eval(arrVariableActual[0]+"='"+unescape(arrVariableActual[1])+"';");
else
eval(arrVariableActual[0]+"="+arrVariableActual[1]+";");
}
Lo que hacemos en la primera línea es eliminar la interrogación del texto
que viene detrás del nombre de la página en la URL. Para lograrlo, escogemos
una subcadena de location.search, que es la
propiedad que contiene ese texto.
Luego, convertimos esa cadena en un vector que tiene una pareja
"variable=valor" en cada uno de sus elementos. Entonces, recorremos cada
elemento de dicho vector, creamos un vector temporal que contiene en su
primer elemento el nombre de la variable y en el segundo el valor y,
utilizando la función eval, creamos
la variable asignandola a su valor.
Por último, indicar que dentro del bucle existe una condición
que comprueba si la variable es o no numérica para, al hacer la asignación,
decidir si encierra o no el valor entre comillas.
Artículos
