location.hash semble être complètement cassé dans Safari 4: Il peut être réglé au départ, mais ne peut pas être en tout état de cause pour autant que je sache, si cet événement est déclenché par un utilisateur action ou une minuterie.de la bizarrerie dans Safari 4
Voici un exemple (j'utilise jQuery ici par souci de concision, mais je ne peux pas imaginer que ce problème est spécifique jQuery):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- Include jQuery -->
</head>
<body>
<div id="test">Click the link below to make this text bold.</div>
<p><a href="#test">Bold it!</a></p>
<p id="hashValue"></p>
<script>
$(document).ready(function() {
location.hash = '#normal'; // this works in all browsers
$('a').click(function() {
$('#test').css({'font-weight': 'bold'});
location.hash = '#bold'; // this fails in Safari 4
return false; // prevents link href from affecting hash
});
setInterval(function() {
if (! location.hash.match('bold$')) {
$('#test').css({'font-weight': 'normal'});
}
$('#hashValue').html(location.hash);
}, 100);
});
</script>
</body>
</html>
Dans Firefox, le comportement est ce que vous attendez: Quand vous chargez la page, le hash est défini sur #normal. Lorsque vous cliquez sur le lien, le texte devient gras et le hachage est défini sur #bold. Parce que le hachage a été modifié, la fonction d'intervalle n'a aucun effet. Si vous modifiez le hachage dans la barre d'adresse à quelque chose d'autre (qui ne se termine pas par bold), le texte n'est pas en gras. Cela permet au bouton de retour de fonctionner de manière intuitive: Cliquez de nouveau sur où le hachage est #bold, et le texte devient gras. Cliquez pour aller ailleurs et le texte n'est pas en gras.
Mais dans Safari 4, le comportement est: Lorsque vous chargez la page, le hachage est réglé sur #normal. Et puis, il restera pour toujours, en ce qui concerne la barre d'adresse. Lorsque vous cliquez sur le lien, le texte deviendra gras, et restera ainsi, même si le hachage dans la barre d'adresse n'a pas changé. Ainsi, location.hash est changé en interne (comme le paragraphe hashValue reflète). Cette incohérence avec la barre d'adresse a des conséquences désastreuses: Si vous cliquez sur le bouton Précédent, le texte n'est pas en gras; mais si vous cliquez sur le bouton Suivant après cela, il ne sera pas re-gras! Cela rompt totalement les bibliothèques d'historique JavaScript, telles que le jQuery history plugin.
Tous les correctifs? Des solutions de contournement? J'ai testé cela dans Safari 4.0.1 sur un Mac.
Fonctionne pour moi (Safari 4.0.1 Mac). Vous voulez poster un lien vers une version qui ne fonctionne pas? – Miles