English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Métodos de uso de la API de historial de registro, demostraciones en línea de ejemplos HTML5Cómo usar la API de historial de registro, la compatibilidad del navegador, la definición de sintaxis y los valores de las propiedades, entre otros detalles.
HTML5La API de historial de registro le permite acceder al historial de navegación del navegador mediante JavaScript. HTML5La API de historial de registro es muy útil en aplicaciones web de una sola página. Las aplicaciones web de una sola página pueden usar HTML5API de historial de registro para hacer que algún estado en la aplicación sea "marcable". Más tarde, volveré a cómo usar la API de historial de registro para establecer un estado marcable en una aplicación de una sola página.
El historial de navegación está compuesto por una pila de URL. Cada vez que el usuario navega en el mismo sitio web, la URL de la nueva página se colocará en la parte superior de la pila. Cuando el usuario hace clic en el botón "Atrás", el puntero en la pila se desplaza al elemento anterior en la pila. Si el usuario hace clic nuevamente en el botón "Adelante", el puntero se desplaza hacia adelante hasta el elemento más alto en la pila. Si el usuario hace clic en "Atrás" y luego en un nuevo enlace, el elemento más alto en la pila será cubierto por la nueva URL.
Este es un ejemplo de pila de historial:
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
La última página visitada en el historial de pila es http://myapp.com/great-new-story.html. Si el usuario hace clic en el botón "Atrás", el puntero en el historial de pila se moverá hacia atrás http://myapp.com/news.html. Si el usuario hace clic en el botón "Adelante", el puntero del historial de pila se moverá hacia adelante http://myapp.com/great-new-story.html，pero si el usuario hace clic en otro enlace (en http://myapp.com/news.html en la página)， entonces la URL del enlace será http://myapp.com/news.html cubre en el historial de pila.
HTML5El API de historial permite que las aplicaciones web accedan a la pila de historial.
HTML5El API de historial solo permite a las páginas web acceder a parte del historial de navegación que está en el mismo dominio. Por razones de seguridad, esta restricción es necesaria en el API de historial, por lo que las páginas web no pueden ver qué otros sitios han visitado el usuario.
Del mismo modo, HTML5El API de historial no permite que las páginas web empujen URL al pila de historial si la URL no está en el mismo dominio. Esta restricción asegura que cuando el usuario comienza a escribir en la página web, la página web no puede fingir que ha redirigido al usuario a, por ejemplo, Paypal y sniff su nombre de usuario/contraseñas, etc.
Se puede acceder al historial de navegación a través del objeto history, que se puede usar como objeto global en JavaScript (es decir, window.history).
El objeto history contiene las siguientes funciones-Incluye el API de historial:
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
La función back() desplaza el historial de navegación a la URL anterior. Llamar a back() tiene el mismo efecto que hacer clic en el botón "Atrás" del navegador.
La función forward() desplaza el historial de navegación al siguiente página en el historial. Llamar a forward() tiene el mismo efecto que hacer clic en el botón "Forward" del navegador. Solo back() se puede llamar a la función o hacer clic en el botón "Atrás" cuando se llama a la función. Si el historial ya apunta a la última URL en el historial de navegación, no hay dirección hacia adelante.
La función go(index) permite avanzar o retroceder en el historial según el índice que se le pasa como parámetro a la función go(). Si llama a go() con un índice negativo (por ejemplo, go(-1)) Si le pasa un índice positivo a la función go(), el navegador se desplazará hacia adelante en el historial de navegación (por ejemplo, go(1)) El índice indica el paso en el historial que se debe avanzar o retroceder en el historial de navegación, por ejemplo1,2,-1,-2...
La función pushState(stateObject, title, url) envía una nueva URL al pila de historial. Esta función tiene tres parámetros. El url es la URL que se empuja a la pila de historial. El parámetro title generalmente es ignorado por el navegador. El stateObject es, el objeto que se transmite con el evento cuando una nueva URL se presiona en la pila de historial. stateObject puede contener cualquier dato que desee. Es solo un objeto JavaScript.
La función replaceState(stateObject, title, url) tiene una funcionalidad similar a la función pushState(), pero reemplaza el elemento actual de la pila de historial con una nueva URL. El elemento actual no necesariamente es el más importante. Este es el componente actual que puede ser cualquier componente en la pila, si se han llamado las funciones back(), forward() y go() del objeto history.
Ahora veamos algunos ejemplos sobre cómo usar HTML5ejemplo de la API de historial.
Primero veamos cómo usar las funciones back() y forward() para movernos de ida y vuelta en el historial:
history.back(); history.forward();
Recuerde, el objeto history está ubicado dentro del objeto window, por lo que también puede escribir:
window.history.back(); window.history.forward();
Pero, dado que el objeto window es el objeto predeterminado, puede omitirlo. En el resto de este tutorial, ignoraré el objeto.
Recuerde, a menos que primero regrese al historial (o el usuario lo haga), no puede ingresar al historial.
Ahora veamos cómo usar la función go() para realizar acciones similares a las funciones back() y forward(). Primero, este es el paso anterior que se usa para navegar hacia atrás en el historial:
history.go(-1;
Para avanzar dos pasos, puede usar-2los parámetros se pasan a la función go() como se muestra a continuación:
history.go(-2;
Del mismo modo, para hacer avanzar el historial, puede pasar un índice positivo a la función go(). Aquí hay ejemplos de dos pasos hacia adelante y dos pasos en el historial:
history.go(1; history.go(2;
Por supuesto, si ejecuta estas dos líneas al mismo tiempo, el historial del navegador se moverá hacia adelante en total3pasos.
Para empujar un estado en la pila de historial, llame a la función pushState() del objeto history. Este es un ejemplo de pushState():
var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);Este ejemplo envía una nueva URL al pila de historial. Esto también cambiará el campo de dirección del navegador, pero no causará que el navegador intente cargar la URL.
La función replaceState() reemplaza el elemento history en la pila de historial actual. Si el usuario lo ha movido de vuelta al historial con el botón "regresar", esto puede no ser el elemento más importante. Este es un ejemplo de replaceState():
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);El reemplazo de estado también cambiará el campo de dirección del navegador, pero no cargará el URL. La página con el URL reemplazado sigue siendo en el navegador.
HTML5El API de historial permite a las páginas web escuchar cambios en el historial del navegador. Las limitaciones de seguridad también se aplican aquí, por lo que no se notificarán cambios en el historial que causen que el URL esté fuera del dominio de la página web.
Para escuchar cambios en el historial del navegador, configura un listener en el objeto window. Este es un ejemplo de listener de eventos de historial del navegador:
window.onpopstate = function(event){
console.log("El historial se cambia a:") + document.location.href);
}El handler de eventos onpopstate se llama cada vez que hay un cambio en el historial del navegador en la misma página (el historial del navegador, la página empujada a la pila de historial). La reacción a los eventos de cambio de historial puede ser extraer parámetros de la URL y cargar el contenido correspondiente en la página (por ejemplo, a través de AJAX).
Nota: Solo los cambios que causen cualquier "regresar" o "adelante" en el botón, o las funciones de navegación histórica correspondientes back(), forward() y go() desencadenarán el listener de eventos onpopstate. La llamada a las funciones pushState() y replaceState() no desencadenará eventos de cambio de historial.
Cuando se empuja un nuevo URL al pila de historial, el campo de dirección del navegador cambia al nuevo URL. Sin embargo, el navegador no intentará cargar el URL. Solo se muestra el URL y se lo empuja a la pila, como si el navegador hubiera visitado la página, pero la página con el nuevo estado empujado sigue siendo en el navegador.
Enviar un nuevo URL al pila de historial es un método útil para agregar un estado específico en aplicaciones de una página (SPA). Por ejemplo, en una tienda en línea en una página única, el URL de la aplicación podría ser:
http://myshop.com
Es posible que esta aplicación pueda mostrar productos a los usuarios en la misma página, pero ¿cómo enviar un enlace específico a un producto a amigos?
La solución es que cuando se carga un nuevo producto, la aplicación de una página única empuja la nueva URL a la pila de historial. Esto no causará la carga de la nueva URL, pero sí la hará visible en el campo de dirección del navegador. Desde allí se puede agregar como favorito o copiar y pegar en correos electrónicos y otros lugares. A continuación se muestra un ejemplo de la apariencia de estas URL que se pueden agregar como favoritos:
http://myshop.com?productId=234
O, tal vez una URL más legible:
http://myshop.com/products/234
O tal vez una versión ligeramente mayor que REST (también se menciona el tipo de producto):
http://myshop.com/products/books/234
Después de empujar la URL al historial del navegador, la página de la tienda web cargará el producto correspondiente mediante AJAX y lo mostrará al usuario.
Si el usuario hace clic en el botón "Atrás", el evento onpopstate llama al gestor de eventos. Luego, la página web debe ver qué es la nueva URL, y si la URL regresa, cargar la página de inicio del producto o aplicación correspondiente http://myshop.com。
Este es un HTML5Ejemplo de código que ilustra el principio de cargar datos al navegador usando AJAX:
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("Cargando datos desde la URL: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("El historial ha cambiado a: " + document.location.href);
loadUrl(document.location.href);
}
</script>Este ejemplo contiene dos enlaces con escuchadores de clics de JavaScript. Después de hacer clic en uno de los enlaces, la URL correspondiente se empujará a la pila de historial y luego se cargará en el navegador.
Este ejemplo también contiene un escuchador de eventos onpopstate. Cuando el usuario hace clic en el botón "Atrás" o "Adelante", este escuchador de eventos cargará cualquier URL que se muestre en el campo de dirección del navegador.
Si el usuario hace clic en el enlace y "Atrás" /El botón "Adelante", entonces el ejemplo mostrado anteriormente se aplicará. Pero, ¿qué hacer si el usuario envía la URL a un amigo o la agrega como favorito y accede a ella más tarde?
Si el usuario intenta acceder a una URL etiquetada, http://myshop.com/books/123el navegador solicitará al servidor web esa URL. El servidor web necesita saber que debe enviar de vuelta la misma aplicación de una página única http://myshop.com. Necesitará configurar el servidor web para realizar esta acción.
Del mismo modo, las aplicaciones web de una página única deben ver la URL utilizada al cargar por primera vez y usar esa URL para determinar el contenido que debe cargarse y mostrar. Por lo tanto, si la aplicación de una página única ya ha cargado la URL, entonces myshop.com/books/123La aplicación debe cargar el producto correspondiente y mostrarlo. Este control de URL debe realizarse durante la inicialización de la aplicación de una página única.
En la redacción de este artículo, además de Opera Mini, todos los navegadores modernos (IE, Safari, Chrome, Firefox) soportan HTML5API de historial.