среда, 27 июля 2011 г.

Средства для работы с навигацией браузера

Для этого у обьекта window есть два свойства-обьекта location и history.

Location Object Properties
Property Description
hash Returns the anchor portion of a URL
host Returns the hostname and port of a URL
hostname Returns the hostname of a URL
href Returns the entire URL
pathname Returns the path name of a URL
port Returns the port number the server uses for a URL
protocol Returns the protocol of a URL
search Returns the query portion of a URL

Location Object Methods
Method Description
assign() Loads a new document
reload() Reloads the current document
replace() Replaces the current document with a new one

Разница между location.assign and location.replace
location.assign(url) загрузит указанный урл в текущий таб браузера, при этом создаст новую запись в истории браузера.
location.replace(url) загризит указанный урл в текущий таб браузера, при этом в истории браузера перетрет новый урлом поточную запись.


History Object Properties
Property Description
length Returns the number of URLs in the history list

History Object Methods
Method Description
back() Loads the previous URL in the history list
forward() Loads the next URL in the history list
go() Loads a specific URL from the history list. 1-следующая запись в истории. -1 - пердыдущая. Строка - первый подошетший урл, в котором содержится такая строка.

Кроме того, сорвременные браузеры реализуют интерфейс HTML5:
interface History {
  readonly attribute long length;
  readonly attribute any state;
  void go(in optional long delta);
  void back();
  void forward();
  void pushState(in any data, in DOMString title, in optional DOMString url);
  void replaceState(in any data, in DOMString title, in optional DOMString url);
};

Таким образом в хтмл5 мы можем непосредственно яваскриптом менять обьект history(раньше для подобного нам нужно было использовать обьект location).
Появилось новое событие  window.onpopstate, которое возникает либо при вызове из яваскрипта методов history.back() history.forward(), history.go() , либо непосредственно нажатием кнопкок навигации вперед/назад на браузере.
Это событие не срабатывает при изменение самим явоскриптом состояния: history.pushState(), history.replaceState().

Пояснение по новому интерфейсу:
pushState():
  1. data - это обьект, который будет хранится в history.state, а также будет передан вместе с событием window.onpopstate .
  2. title - по этому имени можно будет изменить  data, либо с записью в новое поле истории pushState(...), либо изменение существующей записи истории replaceState.
  3. url - новый путь от домена, или аргументы "?param=1" или хеш, которые добавлятся к существующему пути. При этом даже при смене пути перегрузка страницы не произойдет. Это очень удобно, чтобы изменение состояния в результате аякс-запроса отображалось и в урле - это позволяет в другом барузере по ссылке через месенджер перейти сразу на нужное состояние приложения (если конечно серверная сторона адекватно умеет реагировать на прямые такие ссылки), а также поисковым роботам получать на анализ такие страницы.
replaceState() - тоже самое что и пуш, только не создает новую запись в ситорию а редактирует существующую.


Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState, pushState 5 4.0 (2.0) -- 11.50 5.0
history.state -- 4.0 (2.0) -- 11.50 --

Как видно из таблицы, в вебките не повезло с history.state, поэтому единственный способ его получить это в реакции на событие window.onpopstate

Ну и понятно, что ие вообще не повезло

Комментариев нет:

Отправить комментарий