location.hash, похоже, совершенно не работает в Safari 4: он может быть установлен изначально, но не может быть установлен ни в одном событии, насколько я могу судить, вызвано ли это событие действием пользователя или таймером.
Вот пример (я здесь для краткости использую jQuery, но не могу представить, что эта проблема специфична для 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>
В Firefox поведение соответствует ожидаемому: при загрузке страницы хэш устанавливается на #normal. При нажатии на ссылку текст становится жирным, а хэш устанавливается на #bold
. Поскольку хэш был изменен, функция интервала не имеет никакого эффекта. Если вы измените хеш в адресной строке на что-то другое (не оканчивающееся на bold
), текст станет незаполненным. Это позволяет кнопке «Назад» работать интуитивно: щелкните назад, где хэш равен #bold
, и текст станет жирным. Нажмите где-нибудь еще, и текст не выделен жирным шрифтом.
Но в Safari 4 поведение таково: при загрузке страницы хэш устанавливается на #normal. И тогда это останется таким навсегда, что касается адресной строки. При нажатии на ссылку текст станет жирным и останется таким же, даже если хеш в адресной строке не изменился. Таким образом, location.hash изменяется внутри (как отражает параграф hashValue
). Это несоответствие адресной строке имеет тяжелые последствия: если вы нажмете кнопку «назад», текст будет выделен жирным шрифтом; но если вы нажмете кнопку «вперед» после этого, она не наберется! Это полностью разрушает библиотеки истории JavaScript, такие как плагин истории jQuery .
Какие-нибудь исправления? Есть обходные пути? Я проверял это в Safari 4.0.1 на Mac.