Leer parámetros desde la URL en JavaScript

Normalmente se suelen mandar parámetros desde un formulario en HTML / XHTML a un script escrito en un lenguaje de lado de servidor (JSP, PHP, ASP, ...), pero en alguna ocasión tendremos que llamar a un HTML / XHTML pasándole parámetros por URL (es decir, los parámetros son enviados usando el método GET).

En JavaScript podemos recurrir al objeto del navegador location y a su método search. Si una URL con parámetros tiene la forma:

http://elbitcampeador.wordpress.com?parametro1=valor1&parametro2=valor2

Para esta URL, el método location.search devuelve la cadena:

?parametro1=valor1&parametro2=valor2

Donde cada parámetro está separado por el caracter &, y para cada párametro se usa el carácter = para separar el nombre del valor.

A continuación pongo un ejemplo completo de lectura de parámetros desde URL usando JavaScript, y usar dos parámetros en concreto (uno llamado ancho y otro alto) para hacer un recuadro con esas dimensiones.

index.html

[sourcecode language="html"]


Leer parámetros desde JavaScript
<script type="text/javascript" src="script.js"></script>


La URL es:
El valor del parámetro ANCHO es:
El valor del parámetro ALTO es:


[/sourcecode]

script.js

[sourcecode language="javascript"]
function Init(){
var url = String(window.location.href);
var params = String(window.location.search);
var aux1 = new Array();
var aux2 = new Array();
var cont = 0;
var tot = 0;

//si hay parametros
if (params.length > 0){
//eliminamos el primer caracter '?'
params = params.substr(1);

//insertamos en un array las parejas nombre=valor
aux1 = params.split("&");
tot = aux1.length;
for (cont = 0; cont < tot; cont++){
//separo el nombre del valor
aux2 = aux1[cont].split("=");

//trabajo con cada parámetro
if (aux2[0].toLowerCase() == "ancho"){
document.getElementById("ancho").innerHTML = aux2[1];
document.getElementById("cuadro").style.width = aux2[1];
}
else if (aux2[0].toLowerCase() == "alto"){
document.getElementById("alto").innerHTML = aux2[1];
document.getElementById("cuadro").style.height = aux2[1];
}

}

}
else{
alert("No hay parámetros en la URL");
}

document.getElementById("url").innerHTML = url;
}
[/sourcecode]