javascript - onpopstate - window history pushstate refresh

Cómo hacer frente a la actualización de la página con JS History API pushState

Question

Un pequeño sitio web que estaba creando (más como un violín) usa AJAX para cargar cada página. Anteriormente estaba cambiando el hash de la url, esto funcionaba muy bien pero era feo, y el usuario podía actualizar la página, y se mantendría en la misma página.

Ahora he cambiado a usar pushState en la API de historial de JS, que se ve mucho mejor, y el trabajo de avance y retroceso, pero la actualización no lo hace. Por ejemplo:

Ir a: http://example.com/page2 va a un 404 ya que no hay una página real llamada página 2. Pero si hago clic en el botón que usa el método pushState para cambiar la URL, funciona como debería.

¿Cómo se pueden permitir actualizaciones y enlaces permanentes con la nueva API de historial?

(¿Y cómo tratan esto los motores de búsqueda, dado que Google tuvo que crear una forma de indexar las URL de hash, haciendo que el desarrollador cambie a #! ¿Es posible que hagan algo similar para la API de historia en el futuro?)

Answer 1

Esta es una pregunta un tanto antigua, pero fue uno de los mejores resultados de Google. En la búsqueda de ser útil, aquí está mi solución.

Puede usar Mod_Rewrite de Apache para volver a escribir la url en una ubicación central. Por ejemplo: example.com/p2 obtiene el contenido de su página de example.com/index.php?page=p2 Puede mantener su implementación actual de la API de historial y AJAX para obtener el contenido e incluir lo siguiente en su .htaccess

<ifModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^([^//.]+)/?$ index.php?page=$1&full=1 [L]
</ifModule>

En tu index.php:

<?php
if(isset($_GET[''full'']) {
//Generate the full page here
}else{
//Generate just the content for AJAX
}
?>

Esta página es un buen manual para usar mod_rewrite para redirigir un sitio web completo. (Los comentarios 11 y 13 tienen adiciones útiles también)

Answer 2

No debe utilizar pushState para insertar URL no válidas en absoluto. Está destinado a ser utilizado en los casos en que el sitio funciona con AJAX y sin él, es decir, usted empuja la URL que resultaría en la misma salida sin AJAX al crear esta salida con AJAX.

Si solo quieres URL virtuales (como en la era pre-pushState), sigue usando la etiqueta hash.

Answer 3

Tuve que redirigir los errores 404 a la página de inicio del sitio (el que carga las solicitudes de AJAX) y luego obtener el último componente de la URL y ejecutar la función javascript que carga la página utilizando una solicitud de AJAX. No es una gran solución pero parece funcionar bien.