siguientes - open graph facebook

¿Cómo actualiza FB la página sin volver a cargarla(xmlHttpRequest) pero el botón Atrás todavía funciona?

Question

¿Cómo refresca FB la página sin volver a cargarla (xmlHttpRequest) pero los botones Atrás / Adelante todavía funcionan como siempre?

No se trata de usar los métodos history.pushState() . PushState() solo cambia la cadena URL pero no hace nada para obtener una página de búsqueda previa después de hacer clic en el botón Atrás. Entonces es muy diferente.

Aquí está mi código y ejemplo.

Tengo ese sitio (mira la foto a continuación). Header-div y Content-div. Al principio, cuando la abras por primera vez, la URL es mysite.com/page1.php. Quiero cambiar el contenido en Content-div sin cargar la página. Solo nueva información debería aparecer en Content-div. Y la URL debería cambiar a mysite.com/page2.php .

Aquí está el código HTML.

<div id="content"></div>
<a href="" id="relaodLink">Reload Content</a>

Aquí está el código JS.

document.getElementById("relaodLink").onclick = function() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "page2.php", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("content").innerHTML = xmlHttp.responseText;
}
}
return false;
}

Por lo tanto, el encabezado no debe volver a relaodLink después de presionar relaodLink , solo contenido en cambios Content-div. Y lo más importante: la URL debería cambiar, ya que la página realmente se volvió a cargar. El botón Atrás permite ir a mysite.com/page1.php y luego el botón de reenvío permite volver a mysite.com/page2.php . Con los métodos history.pushState() no funciona. Pero en FB Back and Forward Buttons funcionan bien. ¿Como hacerlo?

un gato ocupado http://www.ljplus.ru/img4/a/_/a_ya_vishe/primer-xmlhttp_3.jpg

Answer 1

Esta es una excelente pregunta. Si observas, puedes notar que los botones de retroceso y los botones de reenvío funcionarán en gmail aunque está completamente desarrollado en Ajax.

Los botones de navegación hacia atrás y hacia adelante funcionan para almacenar lo que hay en la barra de direcciones. Entonces, en Ajax, si nunca cambias lo que hay en la barra de direcciones, no entra en el historial y, por lo tanto, los botones de retroceder y avanzar no funcionan.

Para que esto funcione, debe agregar algo constantemente a la barra de direcciones.
Por ejemplo: en gmail ,
Cuando se hace clic en Inbox, ¿ https://mail.google.com/mail/ ? tab = mm # inbox
Cuando se hace clic en Estrella: https://mail.google.com/mail/ ? tab = mm # starred
Cuando se hace clic en Enviado: https://mail.google.com/mail/ ? tab = mm # enviado

Entonces, de esta forma, gmail se agrega a la barra de direcciones. Por lo tanto, la historia se conserva. Lo mismo ocurre con Facebook también. Aunque la página no se actualiza, la ubicación en la barra de direcciones cambió: esa es la clave aquí.

Espero que te ayude !