Esta función se ha descrito brevemente antes. Esta vez, explicaremos los principios y los problemas existentes en detalle (ya que utiliza la nueva API de HTML5, hay problemas de compatibilidad, por lo que se recomienda que el terminal móvil use este método).
Descripción de la función:
Cree una nueva página de pestaña en el navegador y especifique una URL. Después de cargar la página web, los clics no pueden regresar en el proceso normal. Debido a que no hay un historial relevante de la página de pestaña actual, no se pueden devolver registros.
En respuesta a la solicitud del cliente, en este caso, agregue un enlace (como la página de inicio) a su registro de historial, de modo que en la página recién abierta, haga clic para regresar, puede saltar a la página de inicio, permitiendo a los usuarios ver las diversas funciones del sistema y promover la plataforma.
1. Puntos clave de conocimiento
HTML5 presenta el método History.pushState () y History.Replacestate (), que le permite agregar y modificar las entradas del historial elemento por elemento. Estos métodos pueden funcionar junto con el evento Window.onPopState.
Caso:
Suponga que http://mozilla.org/foo.html ejecutará el siguiente código JavaScript:
La copia del código es la siguiente: var stateObj = {foo: "bar"}; History.PushState (stateObj, "Página 2", "Bar.html");
Esto hará que la barra de direcciones del navegador muestre http://mozilla.org/bar.html , pero la página de bar.html no se cargará ni verificará si existe bar.html.
Supongamos que el usuario ahora navega a http://google.com y luego hace clic en el botón Atrás. En este momento, la barra de direcciones mostrará http://mozilla.org/bar.html , y la página activará el evento PopState. El objeto de estado en el caso contiene una copia de StateBJ. La página se parece a foo.html, aunque el contenido de la página puede modificarse en el evento PopState.
Si hacemos clic en el botón Atrás nuevamente, la URL cambiará al documento http://mozilla.org/foo.html para activar otro evento PopState, esta vez el objeto de estado es nulo. Fallback tampoco cambiará el contenido del documento.
Método PushState ()
PushState () tiene tres parámetros: un objeto de estado, un título (que se ignorará ahora) y una dirección de URL opcional. Examinemos los detalles de estos tres parámetros por separado:
Objeto de estado : un objeto JavaScript asociado con una nueva entrada de historial creada con el método PushState (). Cada vez que el usuario navega al estado recién creado, el evento PopState se activa y la propiedad del estado del objeto de evento contiene una copia del objeto de estado de la entrada del historial.
Cualquier objeto serializable puede tratarse como un objeto de estado. Debido a que el navegador Firefox guarda los objetos de estado al disco duro del usuario, de modo que se pueda restaurar después de que el usuario reinicie el navegador, limitamos a la fuerza el tamaño de los objetos de estado a 640K. Si pasa un objeto de estado que excede este límite al método PushState (), el método lanzará una excepción. Si necesita almacenar grandes cantidades de datos, se recomienda usar SessionStorage o LocalStorage.
Título : el navegador Firefox actualmente ignora este parámetro, aunque puede usarse en el futuro. Teniendo en cuenta que este método puede modificarse en el futuro, será más seguro pasar una cadena vacía. Alternativamente, también puede pasar en un título corto que indica el estado que está a punto de ingresar.
Dirección (URL) : la dirección de la nueva entrada del historial. El navegador no carga la dirección después de llamar al método PushState (), pero luego, puede intentar cargar, como el usuario reinicia el navegador. La nueva URL no es necesariamente un camino absoluto; Si es una ruta relativa, se basará en la URL actual; La URL aprobada debe ser la misma que la URL actual, de lo contrario, PushState () lanzará una excepción. Este parámetro es opcional; Si no se especifica, es la URL actual del documento.
Nota: En Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1) a Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2), los objetos pasados se serializan usando JSON. Comenzando con Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3), los objetos se serializan utilizando un algoritmo de copia estructurado. Esto permitirá que se pasen más tipos de objetos de manera segura.
En cierto sentido, llamar a PushState () es un poco similar a la configuración de Window.location = '#foo', y todos crean y activan nuevas entradas de historial dentro del documento actual. Pero PushState () tiene sus propias ventajas:
1. La nueva URL puede ser cualquier URL homóloga. Por el contrario, al usar el método de ubicación de ventana, solo modificar el hash puede garantizar que permanezca en el mismo documento.
2. Decide si modificar la URL de acuerdo con tus necesidades personales. En su lugar, establezca window.location = '#foo' y cree un nuevo historial solo si el valor hash actual no es foo.
3. Puede agregar datos abstractos a la nueva entrada del historial. Si usa un método basado en hash, solo puede transcodificar los datos relevantes a una cadena muy corta.
Tenga en cuenta que el método PushState () nunca activará el evento Hashchange, incluso si la nueva dirección solo cambia el hash.
evento PopState
El evento PopState se activa cada vez que cambia el historial activado. Si la entrada de historial activado es creada por PushState o afectada por el método Replacestate, el atributo de estado del evento PopState contendrá una copia del objeto de estado del historial.
método reemplazar ()
La operación History.RePLAcEtate () es similar a History.pushState (), excepto que el método Reemplazar () modificará la entrada del historial actual en lugar de crear una nueva entrada.
Cuando desea actualizar el objeto de estado o la URL de la entrada del historial actual en respuesta a ciertas acciones por parte del usuario, es particularmente adecuado usar el método Reemplazar () ().
2. Ideas de implementación
1. Use el evento PopState para escuchar el evento de clic y retorno.
2. Cuando se active el evento, determine si hay una página para devolver el historial de la página actual.
3. Si no hay una página que se pueda devolver, se insertan dos registros:
1) La página de salto especificada.
2) Registro vacío. (Haga que la página actual no cambie)
Método de implementación
// Regrese a la página de inicio sin una página antes de devolver la función PushHistory () {if (History.Length <2) {var State = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (estado, "índice", ubicación.href); estado = {título: "índice", url: ""}; window.history.pushstate (estado, "índice", ""); } //lll("history.state " + History.state) //console.log(history.state)}Determine el número de registros en el historial actual. Dado que el navegador presionará automáticamente un registro cuando la página esté cargada. Por lo tanto, debemos determinar si la longitud es inferior a 2.
El objeto de estado relleno es obtener el enlace de URL correspondiente.
Nota:
Puse la URL de salto en el objeto de estado para el primer State Pushstate para facilitar la operación de salto. El segundo parámetro no tiene importancia práctica, porque el navegador actual básicamente no aplica este parámetro.
El tercer parámetro reemplazará el enlace en la barra de direcciones actual, pero la página no saltará. (Cometí un error antes, estableciendo el tercer parámetro en el enlace de la página de inicio, lo que provocó que la barra de direcciones se cambiara al enlace de la página de inicio, de modo que los enlaces en la página actual se redirigan en función de la página de inicio, lo que resulta en el error de todos los enlaces en la página que se redirigen).
setTimeOut (function () {pushHistory () window.adDeventListener ("popState", function (e) {lll ("popState"+window.history.state) if (window.history.state! = null && window.history.state.url! = ") {ubicación.href = window.history.state.state.url}) 300);Este código se coloca en el evento listo de la página, con un retraso de 300 milisegundos para retrasar la operación y evitar conflictos con el evento POP del sistema.
Para determinar si el historial tiene un objeto de estado, solo los registros que cumplan con nuestros requisitos tendrán el objeto de estado que agregamos, por lo que la operación de salto de página se puede realizar en función de este punto.
Esto logrará el efecto que queremos.
4. Escribe al final
defecto:
1. Obviamente, como se menciona al principio. Solo adecuado para navegadores que admiten HTML5.
2. Dado que se insertaron dos registros, la devolución de terminales móviles como WeChat requiere dos clics para regresar antes de iniciar la página y volver a la ventana de chat de WeChat, que tiene una mala experiencia del usuario.
Resumir:
Este método definitivamente se puede optimizar y mejorar, pero mi fuerza no es suficiente para ser perfeccionado al nivel de perfección.
Espero que los amigos que lean este artículo puedan obtener algo de inspiración, o hay mejores formas de lograrlo.