Introducidos desde Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduce dos métodos, histtory.pushState() e history.replaceState(), que permiten la adición y modificación de entidades de historia. Al mismo tiempo, estos métodos funcionan con el evento window.onpostate.
Modifica el referente usando el método history.pushState(), que puede usarse en la cabecera http creada para el objeto xmlhttpRequest después de que el estado haya sido modificado. Este referente será la URL del documento cuando se creó la solicitud XMLHttp.
pushState se usa para añadir un registro de la página actual al historial, mientras que replaceState y pushState se usan exactamente igual, la única diferencia es que se usa para modificar el registro de la página actual en el historial.
ejemplo
Supongamos que http://mozilla.org/foo.html página ejecuta JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "página 2", "bar.html");
Este método hará que la barra de direcciones de URL se muestre http://mozilla.org/bar.html,Pero el navegador no carga bar.html página, aunque exista。
Ahora suponga de nuevo que el usuario sigue accediendo a la http://google.com y vuelve a hacer clic. En este momento, la barra de direcciones de URL, http://mozilla.org/bar.html, la página recibirá un evento popstate (chrome), que contendrá una copia de stateObj. Esta página parece foo.html. +
En ese punto, volvemos a hacer clic y la URL se transformará http://mozilla.org/foo.html,document aparecerá otro evento popstate y un objeto de estado nulo. Esta acción de retorno no cambia el contenido del documento. (Quizá después de un rato intente cargar...) chrome)
Método pushState
pushState() tiene tres parámetros: objeto state, título (ahora ignorado, no gestionado), URL (opcional). Detalles:
· objeto estado – El objeto estado es un objeto Javascrip{filter}t que se relaciona con una nueva entidad de historial creada por el método pushState(). Se usa para almacenar información sobre las entradas que quieres insertar en el historial. El objeto Estado puede ser cualquier cadena Json. Como Firefox utiliza el disco duro del usuario para acceder al objeto de estado, el espacio máximo de almacenamiento de este objeto es de 640k. Si es mayor que este valor, el método pushState() lanza una excepción. Si necesitas más espacio para guardar, usa almacenamiento local.
· título—Firefox ignora este parámetro ahora, aunque podría usarse en el futuro. La forma más segura de usarlo ahora es pasar una cuerda vacía para evitar futuras modificaciones. O puedes pasar un título corto para indicar el estado
· URL - Este parámetro se usa para pasar la URL de la nueva entidad de historial; ten en cuenta que el navegador no cargará esta URL tras llamar al método pushState(). Pero quizá después de un tiempo intente cargar esta URL. Por ejemplo, después de que el usuario reinicie el navegador, la nueva URL puede no ser una ruta absoluta. Si es una ruta relativa, entonces será relativa a la URL existente. La nueva url debe ser codominio con la URL existente, de lo contrario pushState() lanzará una excepción. Este parámetro es opcional y, si está vacío, se colocará como la URL actual del documento.
En cierto sentido, llamar al método pushState() es similar a establecer window.locatio{filter}n = "#foo", ambos crean y activan otra entidad de historial asociada al documento actual, pero pushState() tiene algunas ventajas adicionales:
La nueva URL puede ser cualquier URL que esté en el mismo dominio que la URL actual, a diferencia de que window.locatio{filter}n permanezca en el mismo documento si solo se establece el hash.
L Puedes dejar la URL sin modificar si no lo necesitas. Para comparar, se establece window.locatio{filter}n = "#foo"; Solo se generan nuevas entidades de historial, si tu hash actual no está #foo
Puedes asociar datos arbitrarios con tu nueva entidad de historial. Con un enfoque basado en hash, todos los datos relevantes deben codificarse en una cadena corta.
Ten en cuenta que el método pushState() no hace que ocurra el tiempo de cambio de hash, aunque las URLs antigua y nueva sean simplemente hashes diferentes.
método replaceState()
history.replaceState() se usa de forma muy similar a pushState(), excepto que replaceState() se usa para modificar la entidad de historial actual en lugar de crear una nueva. Este método a veces puede ser útil cuando necesitas actualizar un objeto de estado o la entidad de historial actual en respuesta a ciertos comportamientos del usuario, y puedes usarlo para actualizar la URL del objeto de estado o de la entidad de historial actual.
Evento Popstate
Cuando se cambia la entidad de historia, ocurrirá el evento popstate. Si la entidad historia se genera mediante los métodos pushState y replaceState, el atributo estado del evento popstate contendrá una copia del objeto estado de la entidad historia
Consulta window.onpopstate para más detalles
Lee el estado actual
Lee el estado actual
Cuando la página se carga, puede tener un objeto de estado no vacío. Esto puede ocurrir cuando la página establece un objeto de estado (usando pushState o replaceState) y el usuario reinicia el navegador. Cuando la página se recarga, recibirá un evento de onload, pero no habrá evento de estado pop. Sin embargo, si lees la propiedad history.state, obtendrás este objeto de estado después de que ocurra el evento popstate
Documentación de History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
El parámetro de la URL receptora es de tipo cadena, que se usa para cambiar la URL de la barra de direcciones actual. Una cosa a tener en cuenta es que este parámetro no puede ser el mismo que el multidominio, es decir, el protocolo, el nombre de dominio y el puerto deben ser los mismos.
DOMException no capturada: No se ejecutó 'pushState' en 'History': No se puede crear un objeto history state con URL 'http://www.test.com/' en un documento con origen ' https://www.itsvse.com' y la URL 'https://www.itsvse.com/'.
a <anonymous>:1:9
Código correcto:
|
Publicado en 12/9/2017 13:55:04
|
|
|
|
Publicado en 27/10/2017 9:51:10