2012-01-25 17 views
11

mediante el navegador de vuelta Tengo una página que se carga dinámicamente el contenido basado en un usuario presionando un botón:estado del coto de página para volver a visitar botón

${document).ready(function) 
{ 
    $("#myButton").click(function() 
    { 
     $("#dynamicDiv").load("www.example.com"); 
    }); 
} 

El contenido dinámico funciona bien, que puedo pedir páginas durante todo el día. Pero después de seguir un enlace a otra página, luego presione el botón Atrás del navegador para volver a la página, la página se restablece por completo como si nunca se hubiera cargado contenido dinámico.

Juro que he visto comportamientos diferentes anteriormente, pero tal vez estoy loco. ¿No debería el navegador preservar el estado de la página, en lugar de volver a representarla?

EDITAR: Por cierto, estoy usando Play! marco, si eso tiene alguna relación con esto.

Respuesta

18

El navegador carga la página tal como se recibió por primera vez. No se conservarán las modificaciones DOM realizadas a través de javascript.

Si desea conservar las modificaciones tendrá que hacer un trabajo adicional. Después de modificar el DOM, actualice el hash de la url con un identificador que luego puede analizar y recrear la modificación. Cada vez que se carga la página, debe verificar la presencia de un hash y hacer las modificaciones DOM basadas en el identificador.

Por ejemplo, si está mostrando dinámicamente la información del usuario. Cada vez que muestre uno, cambiaría el hash de la URL a algo como esto: "#/user/john". Siempre que la página se cargue, debe verificar si existe el hash (window.location.hash), analizarlo y cargar la información del usuario.

+2

Se podría pensar que, para una necesidad tan básica, que funcionaría un poco diferente. Me pregunto si HTML5 tiene algo diferente en la tienda para nosotros ... – Indigenuity

+0

Las cookies son otra posibilidad. Puede establecer cookies de sesión en JavaScript. – rustyx

1

epignosisx y Malcolm son tanto de la derecha. También se lo conoce como "enlace profundo". Usamos el complemento de dirección JQuery para tratar esto en una aplicación Play reciente.

http://www.asual.com/jquery/address/

0

Una técnica que utilizo para esto es para serializar el estado de JSON, almacenarlo en la cadena de hash, y luego leer de nuevo cuando la página se navega de nuevo a. Esto ha sido probado en IE10 +, Firefox, Chrome.

Ejemplo:

// On state change or at least before navigating away from the page, serialize and encode the state 
// data you want to retain into the hash string 

window.location.hash = encodeURIComponent(JSON.stringify(myData)); 

// If navigating away using Javascript, be sure to use window.location.href over window.location.replace 

window.location.href = '/another-page-url' 

.... 

// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data 
// by decoding and parsing the JSON string 

if (window.location.hash) { 

    // Read the hash string omitting the # prefix 

    var hashJson = window.location.hash.substring(1); 

    // Restore the deserialized data to memory 

    myData = JSON.parse(decodeURIComponent(hashJson)); 
} 
Cuestiones relacionadas