donc dire que je mets un hachage quand je fais un appel ajax:get url de hachage ajax page charge
exemple: http://example.com/#hash.html
si je charge une autre page et cliquez sur le backbutton, comment pourrais-je détecter la hachage et extraire l'URL sur la charge? Le reste, j'ai déjà couvert :).
Si vous avez besoin de plus de code, s'il vous plaît dites-moi. BTW, j'utilise jquery.
Il existe un événement, hashchange, mais il est uniquement pris en charge dans Firefox 3.6, IE8 et je suppose les derniers Chromes et Safaris.
Pour un meilleur soutien, détecter l'événement hashchange, sinon présent, utilisez une fonction d'interrogation avec setInterval().
Alors vous feriez quelque chose comme ...
(function() {
var hash = window.location.hash;
if ('onhashchange' in window) {
window.onhashchange = hashChanged;
} else {
setInterval(function() {
if (window.location.hash != hash) {
hash = window.location.hash;
hashChanged();
}
}, 500);
}
var hashChanged = function() {
alert('Hash has changed!');
};
})();
merci, hashchange est parfait: D. Je cible seulement safari il fonctionne très bien: D – cmplieger
http://caniuse.com/#feat=hashchange –
$(function() {
var page = window.location.hash;
if (page == "") page = "somedefaultpage.html";
$("#content").load(page);
});
Si vous avez câblé votre navigation correctement la page chargée dans votre élément de contenu devrait déjà être là depuis le navigateur devait accéder à #hash
Vous avez plusieurs options.
La plus évidente est
window.location.hash;
... qui a fait partie de JavaScript réelle depuis quelques années (more information here ou par googler "javascript emplacement hash").
Il y a aussi un plugin jQuery appelé jQuery.Url qui a beaucoup de fonctionnalités intéressantes pour travailler avec les URL.
ne fonctionne pas avec backbutton – cmplieger
Exemple simple avec window.location.hash pour charger ensemble du contenu de hachage approprié dans l'URL lors de la navigation avant et en arrière.
Espérons que cela aide quelqu'un ... à vous acclamer !!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a{
text-decoration: none;
color:#999;
font: arial;
}
.content{
width: 50%;
height: 30px;
border:1px solid darkorange;
padding: 3%;color:#999;
}
</style>
<body>
<div class="box">
<a id="hash1" href="">Add Hash1</a>
<a id="hash2" href="">Add Hash2</a>
</div>
<div class="content"></div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$(".box a").click(function(e) {
window.location.hash = $(this).attr("id");
e.preventDefault();
});
$(window).on('hashchange', function() {
if (location.hash === '#hash1') {
$("div.content").html('Hash one added!');
}
if (location.hash === '#hash2') {
$("div.content").html('Hash two added!');
}
if (location.hash === '') {
$("div.content").html('');
}
});
});
</script>
</body>
</html>
si je voulais un plugin j'aurais demandé :) il – cmplieger