DHTML History es una librería que permite cambiar la dirección del navegador mediante JavaScript sin recargar la página. Se basa en el uso de la almohadilla # o ancla para poder simular la recarga de páginas y que el navegador las añada a su historial, haciendo útiles los botones atrás y siguiente. La librería también implementa un escuchador que se activa cuando la dirección del navegador cambia.
Para poder implementar el uso de los botones “back” y “forward” en nuestras webs ayudándonos de la librería DHTMLHistory necesitaríamos los ficheros dhtmlHistory.js y blank.html, ambos los podemos encontrar entre los materiales del curso o podemos acceder a este ejemplo online sobre el uso de la librería: http://onjava.com/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html y descargarlos.
Como siempre, debemos incluir el fichero Javascript de la librería en el head de nuestra página y en este caso asegurarnos que el fichero blank.html esta en el directorio raiz (este fichero es necesario para la compatibilidad con Microsoft Explorer). Una vez hecho esto empezaremos a escribir nuestro código. Lo primero que hacemos es inicializar la librería y asignar una función al evento de cambio de url en el navegador. Cada vez que cambie la dirección del navegador (siempre que no sea mediante la librería DHTMLHistory) se ejecutara esta función.
window.onload = initialize;
function initialize() {
dhtmlHistory.initialize();
dhtmlHistory.addListener(historyChange);
}
Después escribiremos nuestra función “callback” para ejecutar el código que necesitemos (en el caso escrito arriba escribiremos la función “historyChange” que se lanzará cada vez que cambie la url del navegador). A este función le llegan dos valores, la nueva dirección escrita en la barra del navegador y los datos que hayamos guardado en la cache interna (en los ejemplos de este tema no haremos uso de la cache).
function historyChange(newLocation, historyData){
//codigo;
}
Por último debemos de llamar al método add de nuestra clase dhtmlHistory cada vez que hagamos una petición AJAX. Al método add le pasaremos dos parámetros, el primero será la nueva dirección que deseamos poner en la barra de direcciones y el segundo datos que queramos guardar en la “cache” que nos proporciona dhtmlHistory.
dhtmlHistory.add("#variable="+valor,"informacion_cache");
En el siguiente ejemplo de código mostramos una web en la cual se puede acceder a tres secciones diferentes (que nos mostrarán información diferente, en el ejemplo solo se muestra el número de la sección: 1,2 y 3) pulsando en tres botones (cada uno de ellos nos lleva a una sección). Estos cambios se hacen sin realizar una recarga de página en el navegador (si cambiará la url del navegador, pero solo la parte que sigue al ancla #, con lo que no se produce una recarga de la página). Si tras pulsar una secuencia de botones, por ejemplo 1-2-3-1, hacemos uso del botón “back” volveríamos a la sección 3 (desde la sección 1) sin haber recargado la página.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<script type="text/javascript" src="dhtmlHistory.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
//Inicializar el historial una vez se ha cargado la pagina
window.onload = initialize;
function initialize() {
dhtmlHistory.initialize();
// añades el listener(escuchador) para que salte
// cuando cambia la direccion
dhtmlHistory.addListener(handleHistoryChange);
// actualizamos la pagina.
direccion2java(dhtmlHistory.getCurrentLocation());
}
// Listener (escuchador) que espera algun cambio en la
// direccion del navegador
function handleHistoryChange(newLocation, historyData)
{
direccion2java(newLocation);
}
function cambiar(valor)
{
// añadimos una nueva direccion, el segundo valor es
// por si queremos guardar algun tipo de informacion
dhtmlHistory.add("#id="+valor,"");
cargarPagina(valor);
}
// Aqui rescatamos lo parametros y mostramos la pagina
// acorde a esos parametros
function cargarPagina(id)
{
$('#contenido').html(id);
}
// Funcion que carga las diferentes seccion para ponerlas acorde
// con la direccion que se pasa
function direccion2java(newLocation)
{
arrayVariables = directionParser(newLocation);
id = getParseatedValue("id",arrayVariables);
cargarPagina(id);
}
// con esta funcion conseguimos los parametros que pasamos
// detras de la almohadilla #
function directionParser(direction)
{
var arrayVariables=new Array();
// Quito la almohadilla.
stringVariables = direction.split("#");
if(stringVariables[0].indexOf("&")!= 0)
{
// Separo los parametros.
variables = stringVariables[0].split("&");
// Para cada parametro separo su nombre y su valor.
cont = variables.length;
for(i=0;i<cont;i++)
{
arrayVariables[i]=variables[i].split("=");
}
}
return arrayVariables;
}
//coger valores de la cadena que nos devuelve directionParser
function getParseatedValue(nombre,arrayVariables)
{
var valor = -1;
cont = arrayVariables.length;
// Recorro el array hasta que un parametro se llame nombre
for(i = 0; i < cont; i++)
if(arrayVariables[i][0]==nombre)
valor=arrayVariables[i][1];
return valor;
}
</script>
</head>
<body>
<input type="button" value="seccion1" onclick="cambiar(1);">
<input type="button" value="seccion2" onclick="cambiar(2);">
<input type="button" value="seccion3" onclick="cambiar(3);">
<div id="contenido"></div>
</body>
</html>