окно.Расположение.обновление хэша в Chrome?

#javascript #google-chrome #location

#javascript #google-chrome #Расположение

Вопрос:

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

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

Что я заметил, так это то, что в Chrome 10 при изменении hash :

Происходит что-то похожее на перезагрузку.

Результирующим симптомом является сбой при прокрутке пользователем вниз или вверх.

Мой вывод на консоль сохранен (если вы проверите свою консоль, будут выведены строки проекта).

Значок, похоже, перезагружается.

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

Ответ №1:

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

Кнопки favicon и stop / refresh мигают из-за ошибки 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, есть удаляющие плагины, которые могут быть полезны.

1. В настоящее время переход к якорям работает только в том случае, если хэш не установлен. (например: your.tld / blog#comment-1) Чтобы перейти к новому якорю, вы должны установить хэш в null (window. Расположение. хэш = null) перед применением нового хэша (window. Расположение. hash = ‘#comment-2’) и чем это работает. Надеюсь, это кому-то поможет.

Ответ №2:

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

Добавление знака хэша (#) к значению (т.е. использовать window.Расположение.хэш = «#etc»).
Зарегистрируйте обработчик для обработчика window.onhashchange.
В качестве альтернативы вы могли бы рассмотреть возможность использования history.pushState, если вы пытаетесь вернуть кнопку «Назад» в предыдущее логическое расположение (мне не ясно, чего вы пытаетесь достичь, хотите ли вы просто перейти к разделу на странице или что-то более сложное).

Ответ №3:

 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.