window.location.hash обновить в Chrome?

Question

Я занимался слежкой в ​​Интернете и обнаружил, что window.location.hash = "etc" является широко распространенным методом обновления местоположения браузера без перезагрузки / обновления страницы.Я применил это к этому примеру, который я приготовил: http://dl.dropbox.com/u/1595444/locationExample/index.html

Хорошо работает в Safari, но ...

Я заметил, что в Chrome 10+изменение hash:

Есть что-то похожее на перезагрузку. В результате возникает сбой при прокрутке пользователя вниз или вверх. Моя консольвывод сохраняется (если вы проверяете консоль, выводятся строки проекта). Фавикон, похоже, перезагружается.

Кто-нибудь сталкивался с этой проблемой раньше?Знаете ли вы исправить?

Answer 1

Скорее всего, здесь происходит две вещи:

• Кнопки иконки и остановки / обновления мерцают из-за ошибки Chrome (которая упоминает pushState, но изменения хеша по тому же пути кода).
• Небольшой сбой при прокрутке объясняется тем, что Chrome выполняет полную перерисовку страницы и высококачественную шкалу для обновления эскиза страницы, поскольку рассматривает изменения хеш-функции при создании нового URL-адреса. Это также ошибка . Вы можете видеть это в представлении временной шкалы инспектора, большинство событий прокрутки приводит к перерисовке ширина окна x некоторой небольшой высоты , но иногда будет перерисовка полного окна. В этом блоге есть еще несколько деталей.

Обходной путь для обеих сторон - отложить обновление хэша до тех пор, пока пользователь не закончит прокрутку (вы все равно можете обновить белую полосу, которая появляется под текущим элементом немедленно). Вы можете сделать это, имея что-то вроде:

var scrollTimeout;
window.onscroll = function() {
  // update current item display here
  if (scrollTimeout)
    clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function() {
    scrolTimeout = undefined;
     // update hash here
  }, 100);
};

Так как похоже, что вы используете jQuery, есть плагины для разбора , которые могут быть полезны.

Answer 2

var r='#hello';
if(navigator.userAgent.indexOf('Chrome/')!=-1){
 top.history.pushState("", "", r);
 return;
};
if(r.charAt(0)=='/'){
  top.location.replace(r);
 }else{
  top.location.hash=r;
};

Работал на меня.И на самом деле мне понадобилось много времени, чтобы понять это.Firefox теперь также поддерживает объект history, поэтому мы можем избавиться от всего «хеша» за несколько лет.

РЕДАКТИРОВАТЬ: Да, перезагрузка - это ошибка Chrome.

Answer 3

У меня нет однозначного ответа, но сначала я бы попробовал:

1. Предварительно добавив к значению хеш-знак (#) (т. Е. Используйте window.location.hash = "#etc").
2. Зарегистрируйте обработчик для обработчика window.onhashchange .
3. В качестве альтернативы вы можете рассмотреть возможность использования history.pushState , если вы являетесьпопытка сделать это заставить кнопку возврата вернуться в предыдущее логическое положение (мне не ясно, что вы пытаетесь выполнить, хотите ли вы просто перейти к разделу на странице или что-то более сложное).