Cita:
Iniciado por NzO Para que quieres el setinverval si la url solo va a cambiar cuando el usuario clické.
<a href="#fabricantes_1" onClick="tufuncion(this.href)">Fabricante 1</a>
<a href="#fabricantes_23" onClick="tufuncion(this.href)">Fabricante 2</a>
<a href="#fabricantes_12" onClick="tufuncion(this.href)">Fabricante 3</a>
<a href="#fabricantes_78" onClick="tufuncion(this.href)">Fabricante 4</a>
No lo entiendo :/
Sucede que cuando el usuario hace click en esos vínculos, como tu bien has dicho es muy sencillo detectar el cambio de URL para traer el nuevo contenido, pero imaginate esto: acabo de entrar al sitio, hice click en "Fabricante 1" y después en "Fabricante 2"; ahora que estoy viendo información del Fabricante 2 quiero volver atrás, por lo que apreto el botón correspondiente del navegador. La URL cambió, pero ¿como lo detecto para traer el contenido del "Fabricante 1"? La respuesta sería "revisando la URL cada cierto tiempo".
Resulta que IE tiene varios problemas con esto. Primero que si el ancla no existe en el documento directamente no agrega "ese click" al historial. Entonces se te puede ocurrir hacer algo similar a lo que expone SiR.CARAJ0DIDA, pero resulta también que si bien de esa forma los clicks se agregan al historial, cuando volvemos hacia atrás parece que el window.location.href no se actualiza con la nueva URL.
Es por ello que hay que hacer algo poco ortodoxo, como agregar un iframe, pero que funciona.
A continuación les dejo un par de funciones que trabajan de la siguiente forma: si el navegador es IE, se crea un iframe al cuál con cada click en un link se le cambia su atributo src. La idea es que se verifique constantemente hacia a donde apunta ese iframe; dentro del iframe existe la función getLocation que es la encargada de darnos esa información (no podemos saber a donde apunta obteniendo su atributo src ya que cuando se navega con los botones de atrás y adelante este atributo no se modifica como cuando se clickea en un link). Cuando se detecta un cambio en su location es porque el contenido de nuestro sitio debe cambiar.
Por otro lado, si el navegador no es IE, trabajamos simplemente con anclas como se venía hablando a lo largo del post.
Parte de la idea del iframe la tomé de
http://www.contentwithstyle.co.uk/Articles/38/ aunque verán que el código que posteo a continuación es bastante mas sencillo.
index.php
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX</title>
<script language="javascript">
function inicializar()
{
var navegador=navigator.userAgent; isIE=false;
if(navegador.indexOf("MSIE")>=0 && navegador.indexOf("Opera")==-1)
{
// IE
isIE=true;
var navIframe=document.createElement("iframe"); navIframe.id="nav"; navIframe.name="nav";
navIframe.src="iframe.php"; navIframe.style.display="none";
document.body.appendChild(navIframe);
}
source="";
setInterval("verificaLocation()", 1000);
}
function nuevoContenido(hash)
{
if(isIE) document.getElementById("nav").src="iframe.php?hash="+hash
else window.location.hash="#"+hash;
}
function verificaLocation()
{
if(isIE) newSource=nav.getLocation();
else newSource=window.location.href;
if(source!=newSource)
{
source=newSource;
alert(source);
if(isIE) hashSeter(newSource);
}
}
function hashSeter(string)
{
var comienzo=string.indexOf("hash=");
if(comienzo!=-1)
{
comienzo+=5;
var cantidad=string.indexOf("&", comienzo)-comienzo; if(cantidad<=-1) cantidad=string.length;
window.location.hash="#"+string.substr(comienzo, cantidad);
}
else window.location.hash="";
}
</script>
</head>
<body onLoad="inicializar();">
<a href="javascript:nuevoContenido('1')">Link 1</a><br>
<a href="javascript:nuevoContenido('2')">Link 2</a><br>
<a href="javascript:nuevoContenido('3')">Link 3</a>
</body>
</html>
iframe.php
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?=$_SERVER['QUERY_STRING']?></title>
<script type="text/javascript">
function getLocation()
{
return "<?="http://".$_SERVER["SERVER_NAME"].$_SERVER["PHP_SELF"]."?".$_SERVER["QUERY_STRING"]?>";
}
</script>
</head>
<body>
</body>
</html>
Tiene algunas líneas que usé para debuggear, pero supongo que como ejemplo puede resultar útil. Funciona en IE, Opera 8 y 9, Firefox, Netscape y en los demás no lo he probado.
Saludos!