Paso de variables Javascript entre páginas (I)

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&iacute;</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.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

HAY 98 COMENTARIOS
  • Marco dijo:

    Puede ser algo util para poner en una pagina lo que otro ha tecleado en un formulario... Saludos, Marco

  • [email protected] dijo:

    me parece que este sistema es un tanto rebuscado y que se tiene que teclear mucho código para pasar dos variables de una página a otra... no sería menos engorroso utilizar un frameset y asignar las variables al parent?

  • josue calderon dijo:

    Bueno, mas que comentario es una pregunta: Sabes como puedo pasar variables de JScript a otra pagina que sera creada con ASP para poder accesar a datos creando un query segun la variable dada?

  • Marcos dijo:

    Probé lo siguiente en Internet Explorer 4 y no funcionó: var valor=location.href.search

  • Daniel Rodríguez dijo:

    Bueno, uno a uno y no se me amontonen... Esta manera de pasar variables es perfectamente legibles desde ASP a través de la colección Request.QueryString("nombrevariable"). Segundo, sí, puede parecer un poco más rebuscado, pero una vez hechas las funciones (y ya las he hecho yo) resulta bastante más cómodo que tener que andarte con frames, a no ser que tu página ya tenga frames, claro está. Por último, Marco, no es location.href.search, sino location.search a secas, en ambos navegadores.

  • Dani dijo:

    La verdad es que nunca habia caído en hacerlo así, yo también era de los que usaban frames innecesarios o en el caso de que el servidor lo permitiera, los pasaba por el Query String para PHP o ASP. No conocia las funciones para recoger el Query con javascript, y por supuesto nunca hubiera caído en lo de usar el eval para definir las variables. PERFECTO!!

  • Marcos dijo:

    Es verdad, probé lo que me dijiste y funciona pero sólo en Internet Explorer 5 y Netscape 4, pero en Internet Explorer 4 (Versión 4.72.3110.8) no me devuelve nada si pongo: alert(location.search);

  • Marco dijo:

    Me ha sido muy util para muchas cosas. "Algo util" es lo que puse en otro mensaje, pero solo lo había usado una vez. Ahora lo usé más veces y para muchas cosas está muy bién. Mar

  • Marina dijo:

    El problema que tengo es que en la pagina origen tengo un cgi escrito en Perl, y no se como escribir javascript dentro de Perl, si alguien puede ayudarme que me escriba. Gracias.

  • Diego dijo:

    Ya era hora, llevaba 2 dias buscado esto mismo entre tutoriales y libros, me salva la vida para una pagina con frames de la que el principal depende del enlace desde el que se accedio. Gracias

  • Marilyn dijo:

    Por favor!!!!, Necesito saber cómo hago para llenar un botón select de un formulario mediante un ciclo for?

  • Antono dijo:

    Hola tengo un problema con el paso de variables de una página a otra, cuando intento ejecutar la funcion de paso de variable en origen.html me da un error sobre las variables que le paso en el href a la funcion.Me pudes ayudar? gracias y un saludo

  • carloz dijo:

    gracias, es muy util. El unico problema es que no me funciona con Netscape 4.7. caso contrario con Iexplorer 5, que funciona perfecto... te agradeceria si me pudes ayudar

  • jos dijo:

    ¿Se pueden pasar las variables de un marco a otro de la misma página? Con un target en el HREF de la página origen no funciona. Gracias.

  • Fernando dijo:

    Nesecito saber como al recuperar variables de ASP las incluya en una redireccion javascript, y como hacer para que el valor de un combo se incluya en una variable.

  • Camilo dijo:

    como hago para abrir una página de agradecimientos y a la vez enviar un correo cuando presiono el boton submit?

  • Antonio Cuan dijo:

    Alguien me puede ayudar porque no lee las variables cuando uso Netscape, con Explorer si funciona estoy usando PHP

  • sandra dijo:

    el problema es que esta linea document.write(""); no me permite que lo vea en netscape, como hago para reemplazarla, por favor se lo agradecere

  • juan dijo:

    a mi este ejemplo no me funciona de ninguna de las maneras y no se porque.....

  • Nuria dijo:

    Espero no pedir demasiado, pero con el paso de variables por la URL, el problema que se presenta es el límite en la longitud de las variables. ¿Podrías explicar un método que funciones con method=POST del formulario (sin pasar por la URL las variables)? Como si fuera un cgi o ASP (etc) vamos... De todas formas, el artículo es genial. Muchas gracias.

  • Victor M. dijo:

    Me gustaria saber como pasar unas comillas, he tratado de pasar por ejempo cadena='+' where clave = "002"' pero me salen asi where clave="002" como puedo quitarselas Gracias

  • javi dijo:

    Cuando paso parámetros a la URL desde un enlace href me contesta el Netscape 4.75 me contesta " el parámetro no es correcto" cosa que no ocurre en el Explorer. El problema surge al pasarle una cadena con espacios, pero añadiendo %20 entre los espacios tampoco funciona. La cadena la leo de una base de datos y la única solución que se me ocurre es no pasarle la cadena y leerla de nuevo en la página destino pero eso es una chapucilla. Si alguien conoce alguna solución mejor agradecería que me la diera. Gracias.

  • javi dijo:

    Cuando paso parámetros a la URL desde un enlace href me contesta el Netscape 4.75 me contesta " el parámetro no es correcto" cosa que no ocurre en el Explorer. El problema surge al pasarle una cadena con espacios, pero añadiendo %20 entre los espacios tampoco funciona. La cadena la leo de una base de datos y la única solución que se me ocurre es no pasarle la cadena y leerla de nuevo en la página destino pero eso es una chapucilla. Si alguien conoce alguna solución mejor agradecería que me la diera. Gracias.

  • jc dijo:

    He visto el metodo que utilizas y está bastante bien, pero tengo un problema: mi pagina origen enlaza con una pagina destino que contiene marcos, y el contenido de uno de esos marcos depende de enlace que llames en la pagina origen. ¿como puedo resolverlo? Te agradeceria que me contestaras lo antes posible Un Saludo JC.

  • rocio dijo:

    me gustaria saber que programa me recomienda para hacer pagina web y me dice en que sitio me lo puedo bajar mucha gracias. adio

  • mt72 dijo:

    Me ayuda mucho en mis paginas web, es justo lo que necesitaba. Y ademas de una manera muy simple. mt7

  • AbraSoft dijo:

    Este ejemplo no funciona....

  • claudia dijo:

    hola!!!1 sabes mi pregunta es como puedo pasar un valor de una variable en javascript a php o viceversa...... mi intencion es hacer un select en el cual haciendo un click en la region se despliegen las comunas de esa region pero necesito hacerlo en javascript con php ya que las regiones y comunas estan en bases de datos

  • Friedrick Schmidt Vincenzi dijo:

    Yo trabajo en la UNED (Universidad Estatal a Distancia. www.uned.ac.cr) de Costa Rica. Desarrollo aplicaciones y en ocacines aplicaciones para el web, las herramientas que utilizamos son: Visual Interdev, Macromedia Dream Weaver, Macromedia Flash, extenciones de Ultradev. He trabajado con la marca FORM para enviar y recibir variables (GET/POST) pero no funcionan cuando tengo definido un recodset conectado a una base de datos para desplegar los datos en un cuadro (grid), cuanto pongo la marca FORM el cuadro con los datos nunca aparece. Este método de paso de variables Javascript está genial, muchas gracias.

  • Javi dijo:

    ¿Que puedo hacer, para que las variables que se envían, se abran en otro ventana, y no en la misma?, ya lo intente con target=”_blank”.

  • Currante dijo:

    ¿Que puedo hacer, para que las variables que se envían, se abran en otra ventana, y no en la misma?, ya lo intente con target=”_blank”.La pagina destino se abre sobre la ogigen, yo quiero que se abra en otra.Gracias

  • Leugrim dijo:

    Aunque solo me hizo falta la primera línea del codigo, pero gracias.

  • Nicer dijo:

    "¿Que puedo hacer, para que las variables que se envían, se abran en otra ventana, y no en la misma?, ya lo intente con target=”_blank”.La pagina destino se abre sobre la ogigen, yo quiero que se abra en otra.Gracias" JavaScript Tienes que copiar y pegar en el encabezado de tu código HTML el siguiente código JS function pV(pagina, nombres) { pagina +="?"; nomVec = nombres.split(","); for (i=0; iTEXTO DE LINK Recuerda reemplazar en el código JS "NombreDeLaPaginaHTMLqueQuieresAbrir.htm" por el nombre completo de la página que a la que quieres pasar los valores y de ser necesario incluir el path completo por ej. http://www.tudominio.com/html/NombreDeLaPaginaHTMLqueQuieresAbrir.htm "NombreDeTuVariable1" por el valor nombre que le deseas asignar "ValorDeTuVariable1" por el valor que le deseas asignar "TEXTO DE LINK" por el texto que quieras poner NO IMPORTA CUANTAS VARIABLES DECLARES porque el código que vá en el encabezado de la página que recibe la cadena de valores busca automaticamente la cantidad de variables que estas pasando JavaScript Tienes que copiar y pegar en el encabezado de tu código HTML de la página que recibe los valoresel siguiente código JS para que pueda interpretarlos cadVariables = location.search.substring(1,location.search.length); arrVariables = cadVariables.split("&"); for (i=0; i

  • Nicer dijo:

    Acabo de notar que mi comentario no ha salido por completo así que para solicitarlo solo envíenme un email o contactenme a ICQ#16611566

  • carlos dijo:

    si el valor de la variable es una imagen, como visualizo la imagen en la pagina destino gracias

  • Grobert dijo:

    Tengo un archivo texto donde tengo mis datos y una pagina php me los procesa y una vez procesados quiero que se envien las variables a otra pagina sin tener que hacer algun click

  • NAYO dijo:

    necesito introducir la variable de la pagina origen en una caja de texto de formulario en la pagina destino y no consigo hacerlo ... estoy a un paso gracias a vosotros ... un saludo

  • Ender dijo:

    He comprobado que en algunos navegadores, la cadena "&" se pasa como "%26", y este ejemplo no funciona. No sé si este "%26" es solución para los navegadores que tiene un code type adecuado, si a alguien le funciona correctamente el ejemplo y puede probar con el "%26" en vez de con el "&" y comentar que resultado da...

  • Rafael dijo:

    hola!!. Necesito muchisimo saber si se puede pasar una variable de javascript a php o viceversa, pero en la misma pagina, es decir, como puedo utilizar en ph una variable de java script. Otra cosa es que necesito saber si existe alguna forma de acceder a los valores de un elemento del formulario desde php, pero sin enviar los datos con get o post, es decir, en la misma pagina donde esta el formulario, acceder con php sus datos. El problema es que tengo dos SELECT, y la lista de uno depende da la opcion seleccionado en el otro. De antemano muchisimas gracias.

  • Carlos dijo:

    Tengo una página con frames(Ej. Frame1 y Frame2), en el frame2 tengo todos los datos, por lo que quiero pasar estos datos a otra pagina (teniendo la llamada de la otra pagina en el frame1), no puedo utilizar el metodo GET que proponen ya que son mas de 20 datos(y no quiero que se vea), podrían ayudarme con este problema?

  • migue dijo:

    Mi consulta es muy similar a la de Carlos... Teniendo una página con frames, siendo muchos datos, ¿cómo puedo pasarlos de otro modo que no sea como querystring? lo que quiero es pasar estos datos a otra pagina (simular que uso asp pero usando javascript), Igualmente son mas de 20 datos y necesito ayuda urgente... espero agredcido de antemano, su respuesta...

  • Jonathan dijo:

    necesito capturar el array del select multiple para insertar uno a uno las opciones escogidas en una tabla....como lo podria hacer...De antemano gracias..

  • Alvaro dijo:

    Hola, tengo muchos problemas. He hecho una web para mi colegio, en la que salen las notas de cada alumno. Entonces, un alumno entra en su seccion. En la página index defino las variables. Por ejemplo, la que interesa para este problema es: var alumno = "alvaro"; entonces pinchas en un enlace, que manda las variables a la pagina de detino, las traduzco, y hago un document.write(); entonces estan definidas las notas en esta página, y estan asi: var alvaro1 = 1; var alvaro2 = 8; var alvaro3 = 5; ¿como lo hago para que luego en el document.write ponga el nombre del alumno y el numero, pero que ponga el nombre de la variable (nombre) que contiene el valor del nombre del alumno (alvaro) y el numero de nota que quiero que saque, por ejemplo la 1. Entonces quiero que me quede lo siguiente: document.write(alvaro1); pero poniendo document.write(nombre+1); es decir, que al valor de la variable nombre se le sume un uno al final????? ES MUY URGENTE, POR FAVOR, AYUDAME Y PROMETO PONER UN ENLACE A TU WEB EN MI PÁGINA. MUCHAS GRACIAS.

  • Frederick dijo:

    Alvaro, escribiste lo siguiente "Problemas (12/08/2002) Por Alvaro Hola, tengo muchos problemas. He hecho una web para mi colegio, en la que salen las notas de cada alumno. Entonces, un alumno entra en su seccion. En la página index defino las variables. Por ejemplo, la que interesa para este problema es: var alumno = "alvaro"; ... " Lo mejor que puedes hacer es que, en lugar de definir variables individuales, defines un arreglo y haces un bucle (for) que recorra el arreglo.

  • Pablo dijo:

    Tengo que pasar una variable en java por un formulario, el problema esta en que ese mismo formulario tambien tiene la opcion de poder subir archivos para ser guardados en el server. Mi problema es que si uso el location.href estaria descuidando el enctype="multipart/form-data" con lo que los archivos no pasarian, lo que se me ocurre es pasar la variable de javascript a php, pero como ? Desde ya muchas Gracias Pablo

  • Manuel dijo:

    Por favor necesito ayuda , necesito ejecutar una consulta sql en una pagina de una intranet pero con la caracteristica que la página no se actualize , ose a que sea de manera dinámica,si sabes como hacerlo porfavor escribeme

  • Azrael espada dijo:

    No entiendo donde le pasas los valores a las variables. Le pasas los nombres a la función pero y sus valores? escape(eval(nomVec[i]))+"&"; puede ser esto lo que se me escapa?.

  • Hiran dijo:

    tengo una actualizacion de una base de datos en unarchivo asp en Vbscript y quiero pasar el valor de un campo hacia la sigueinte pagina que esta en html

  • Nachzeher dijo:

    Hola, se que no va con el tema, pero lo que pasa es que nescesito un script que me permita capturar un una Tecla desde el teclado o una combinación de teclas, para de alguna forma asociar eventos o funciones a ellas, si me pueden ayudar GRACIAS... si no pues también.

  • juan jose dijo:

    tengo un problema nesecito pasar el valor de una variable obtenida de un evento javascript a una variable en php $varphp=varjavascript el evento java es el siguiente y funciona ahora deseo pasar este valor a una variable en php ."