Pasar variables por la url en Javascript

Posted by On septiembre 08, 2016 8 Comments

Hace tiempo que llevo pensando en la forma de Pasar variables por la url en Javascript, como ya hemos visto se puede hacer en PHP de forma muy sencilla, pero javascript no tiene integrada esa funcionalidad.

Pero podemos crear una función que recoja las variables en un array desde la url y de ese modo podemos trabajar de forma muy similar a como se hace en PHP.

Está función sería la siguiente:

/**
* Funcion que captura las variables pasados por GET
* Devuelve un array de clave=>valor
*/
function getGET()
{
    // capturamos la url
    var loc = document.location.href;
    // si existe el interrogante
    if(loc.indexOf('?')>0)
    {
        // cogemos la parte de la url que hay despues del interrogante
        var getString = loc.split('?')[1];
        // obtenemos un array con cada clave=valor
        var GET = getString.split('&');
        var get = {};
        // recorremos todo el array de valores
        for(var i = 0, l = GET.length; i < l; i++){
            var tmp = GET[i].split('=');
            get[tmp[0]] = unescape(decodeURI(tmp[1]));
        }
        return get;
    }
}

De esta forma convertimos la parte que mantiene las variables en la url en un array clave=>valor.

Ahora lo que deberíamos de hacer es o bien recorrerlo para trabajar con el array o bien guardar los valores como si se tratase de PHP

window.onload = function()
{
    // Cogemos los valores pasados por get
    var valores=getGET();
    if(valores)
    {
    	//recogemos los valores que nos envia la URL en variables para trabajar con ellas
    	var nombre = valores['nombre'];
    	var edad = valores['edad'];
	// hacemos un bucle para pasar por cada indice del array de valores
        for(var index in valores)
        {
            document.write("clave: "+index+" - valor: "+valores[index]);
        }
        document.write('

<hr>


Te llamas '+ nombre);
        document.write(' Tu edad es '+ edad);
    }else{
        // no se ha recibido ningun parametro por GET
        document.write("No se ha recibido ningún parámetro");
    }
}



En este ejemplo lo único que tenemos que cambiar son los índices según deseemos y utilizar las variables como nos plazca, de hecho podemos verlo en funcionamiento de forma completa para la siguiente url:

recibir.html?nombre=Miguel&edad=37

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>

    /**
    * Funcion que captura las variables pasados por GET
    * Devuelve un array de clave=>valor
    */
    function getGET()
    {
        // capturamos la url
        var loc = document.location.href;
        // si existe el interrogante
        if(loc.indexOf('?')>0)
        {
            // cogemos la parte de la url que hay despues del interrogante
            var getString = loc.split('?')[1];
            // obtenemos un array con cada clave=valor
            var GET = getString.split('&');
            var get = {};
            // recorremos todo el array de valores
            for(var i = 0, l = GET.length; i < l; i++){
                var tmp = GET[i].split('=');
                get[tmp[0]] = unescape(decodeURI(tmp[1]));
            }
            return get;
        }
    }
    window.onload = function()
    {
        // Cogemos los valores pasados por get
        var valores=getGET();
        if(valores)
        {
        	//recogemos los valores que nos envia la URL en variables para trabajar 
                //con ellas
        	var nombre = valores['nombre'];
        	var edad = valores['edad'];
    	        // hacemos un bucle para pasar por cada indice del array de valores
            for(var index in valores)
            {
                document.write(" clave: "+index+" - valor: "+valores[index]);
            }
            document.write('
<hr>

 Te llamas '+ nombre);
            document.write(' Tu edad es '+ edad);
        }else{
            // no se ha recibido ningun parametro por GET
            document.write("No se ha recibido ningún parámetro");
        }
    }
    </script>
</body>
</html>

Aquí podemos ver cómo podemos capturar las variables y guardarlas dentro de nuestro script, considerando que los indices nombre y edad nos los da la url y deberíamos cambiarlos dependiendo del nombre que tengan en cada caso, pudiendo ser todos los que necesitemos.

Lo que si tenemos que tener en cuenta es que las variables que recogemos son siempre strings, por lo que si trabajamos con valores numéricos tenemos que convertir las variables en numericas.

edad = parseInt(edad);

De esta forma ya podemos trabajar también con números.

Espero que os haya servido y que os funcione en vuestros proyectos.