Для этого у обьекта window есть два свойства-обьекта location и history.
Location Object Properties
Location Object Methods
Разница между location.assign and location.replace
History Object Properties
History Object Methods
Кроме того, сорвременные браузеры реализуют интерфейс HTML5:
Таким образом в хтмл5 мы можем непосредственно яваскриптом менять обьект history(раньше для подобного нам нужно было использовать обьект location).
Появилось новое событие
Это событие не срабатывает при изменение самим явоскриптом состояния:
Пояснение по новому интерфейсу:
pushState():
replaceState() - тоже самое что и пуш, только не создает новую запись в ситорию а редактирует существующую.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():
- data - это обьект, который будет хранится в history.state, а также будет передан вместе с событием
window.onpopstate . - title - по этому имени можно будет изменить data, либо с записью в новое поле истории pushState(...), либо изменение существующей записи истории replaceState.
- url - новый путь от домена, или аргументы "?param=1" или хеш, которые добавлятся к существующему пути. При этом даже при смене пути перегрузка страницы не произойдет. Это очень удобно, чтобы изменение состояния в результате аякс-запроса отображалось и в урле - это позволяет в другом барузере по ссылке через месенджер перейти сразу на нужное состояние приложения (если конечно серверная сторона адекватно умеет реагировать на прямые такие ссылки), а также поисковым роботам получать на анализ такие страницы.
| 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Ну и понятно, что ие вообще не повезло
Комментариев нет:
Отправить комментарий