comment pousser la page actuelle vers l'historique du navigateur

J'ai une page que l'utilisateur peut utiliser une entrée pour filtrer le résultat. Après avoir entré certains caractères dans l'entrée d'entrée, au lieu de la supprimer manuellement, les gens aiment utiliser le bouton de retour dans le navigateur pour revenir à l'état "vide" de l'entrée. Mais le résultat est récupéré par AJAX, ce qui signifie que le comportement du bouton de retour est incorrect (impossible d'effacer l'entrée, mais de revenir à la page précédente), est-il possible de pousser une url vide ou actuelle vers l'arrière empiler de sorte que l'utilisateur peut obtenir le résultat comme ils le souhaitaient?comment pousser la page actuelle vers l'historique du navigateur

Pour être clair, je veux:

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

Source

2010-12-07 Bin Chen

À l'étape 4, le contenu de la page doit-il également être non filtré? Dans ce cas, il ne serait pas plus facile de laisser tomber la partie ajax. En utilisant un HTTP régulier avec un filtre, vous obtiendrez automatiquement le bon comportement. – harald

Vous pouvez jouer avec la partie # de l'URL. – kapa

Référez-vous à http://plugins.jquery.com/plugin-tags/bookmark – Vicky

Voici deux approches générales pour la gestion de l'histoire. Les deux travailleront avec l'idée de la «page blanche», même si vous devrez peut-être modifier le code. Les deux façons de procéder utilisent l'identificateur de fragment ou l'API de nouvelle histoire.

En utilisant l'identifiant de fragment ressemblerait à quelque chose comme ceci:

<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>

Cette technique fonctionne sur IE8, Firefox 3.6 et Chrome 5. Vous pouvez pirater des choses similaires dans les navigateurs précédents en ayant des zones de défilement cachées et la détection de rouleaux, ou en interrogeant régulièrement la partie de hachage de l'emplacement.

Une autre méthode utilise la nouvelle API d'histoire

<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>

Cela fonctionne récent Firefox et Chrome, mais seulement IE10.

Bien sûr, vous feriez mieux d'utiliser une bibliothèque. Un ancien est Really Simple History, mais il existe des plugins plus modernes pour jquery qui fournissent des fonctionnalités similaires, par exemple. BBQ ou le hashchange plugin.

Source

2012-09-07 12:44:46 kybernetikos

comment pousser la page actuelle vers l'historique du navigateur

Répondre

Questions connexes