cómo insertar la página actual en el historial del navegador

Tengo una página en la que el usuario puede usar una entrada para filtrar el resultado. Después de ingresar algunos caracteres en la entrada de entrada, en lugar de eliminarlos manualmente, a las personas les gusta usar el botón Atrás en el navegador para regresar al estado "vacío" de la entrada.cómo insertar la página actual en el historial del navegador

Pero el resultado es obtenido por AJAX, lo que significa que el comportamiento del botón de retroceso es incorrecto (no se puede borrar la entrada, pero solo volver a la página anterior), ¿es posible insertar una url vacía o actual en la parte posterior apilar para que el usuario pueda obtener el resultado deseado?

Para que quede claro, yo quiero:

1) user enter some characters to the input entry 
2) user press "filter" button 
3) user press back button 
4) the input entry is cleared

Fuente

2010-12-07 Bin Chen

En el paso 4, ¿no debería filtrarse también el contenido de la página? En ese caso, ¿no sería más fácil simplemente dejar caer la parte Ajax? Al usar un HTTP común con un filtro como parámetro, obtendría automáticamente el comportamiento correcto. – harald

Puedes jugar con la parte # de la URL. – kapa

Consulte esto http://plugins.jquery.com/plugin-tags/bookmark – Vicky

Aquí hay dos enfoques generales para la gestión de la historia. Ambos trabajarán con la idea de "página en blanco", aunque es posible que deba modificar el código.

Las dos formas de hacerlo utilizan el identificador de fragmento o la nueva API de historial.

Utilizando el identificador de fragmento sería algo como esto:

<body onhashchange="hashChanged()" onload="hashChanged()"> 

<input id='query'></input><button onclick="location.hash = '#'+document.getElementById('query').value">Query</button> 

<script type="text/javascript"> 

function query(str) { 
    // do your ajaxy thing 
} 

function hashChanged() { 
    var str = location.hash.substring(1); 
    document.getElementById('query').value = str; 
    query(str); 
} 

</script> 
</body>

Esta técnica funciona en IE8, Firefox 3.6 y Chrome 5. Puede cortar cosas similares en los navegadores anteriores por tener áreas de desplazamiento ocultos y detectar las volutas, o al sondear regularmente la parte hash de la ubicación.

Otro método utiliza la nueva API historia

<body onload="queryChanged();"> 

<input id='query'></input><button onclick="history.pushState(str, "", "?query="+str);query(document.getElementById('query').value)">Query</button> 

<script type="text/javascript"> 

function query(str) { 
    // do your ajaxy thing 
} 

function queryChanged() { 
    var str = ""; 
    var re = /[\?|&]query=([^&]*)/ 
    if (re.test(location.search)) { 
     str = re.exec(location.search)[1]; 
    } 
    document.getElementById('query').value = str; 
    query(str); 
} 

window.onpopstate = queryChanged; 
</script> 
</body>

Esto funciona en Firefox y Chrome reciente, pero sólo IE10.

Por supuesto, probablemente sea mejor que use una biblioteca. Uno antiguo es Really Simple History, pero hay más complementos modernos para jquery que proporcionan características similares, p. BBQ o el hashchange plugin.

Fuente

2012-09-07 12:44:46 kybernetikos

cómo insertar la página actual en el historial del navegador

Respuesta

Cuestiones relacionadas