Изменить историю браузера в сложных приложениях

Изменить историю браузера

Рассмотрим сложное приложение, например электронная почта. По сути, это комплексная программа JavaScript которая работает на одной странице HTML. Пользователь открывает почту, и ему показан список писем. Он нажимает на заголовок в списке что бы посмотреть содержимое письма, которое отобразиться с помощью Ajax. Теперь, пользователь хочет вернуться к списку писем, и что ему делает …?

… просто в браузере нажмёт кнопку назад.

Содержимое письма закроется и откроется страница со списком писем, где пользователь был до открытия содержимого письма. А если это новая вкладка браузера? Кнопка возврата не будет работать и не может быть нажата. Возникает проблема. В нашей электронной почте не поддерживается контроль в одном из браузеров большинство пользователей это понимают. Но есть решения! Некоторые связаны с изменением решетки (# имя) в URL, поэтому состояние не может быть сохранено. Это не идеально, но работает во всех браузерах.

К счастью, проблема была решена с помощью методов HTML5  history.pushState  и  history.replaceState  в сочетании с событиями window.onpopstate .
Демо
Техника на удивление простая:

  1. При изменении состояния, например когда пользователь открывает письмо, history.pushState() передается информация о состоянии и выполнении. Это разрешает кнопку назад, а главное не переключает пользователя со страницы.
  2. Вы можете запустить history.pushState() столько раз, сколько необходимо или изменить текущее состояние с помощью history.replaceState() .
  3. Когда пользователь нажимает назад (или вперед), срабатывает событие window.onpopstate . Функции обработчики могут получить ассоциированное состояние и показать соответствующею вкладку.

Недостатком этого является не совместимость с IE до версии 10. Если вам нужна поддержка в IE9 и ниже, существует ряд других решений например  History.js и HTML5 History API.

Давайте писать код. Предположим, что показан результат запроса Ajax:



// Ajax request
...
// display result
...
// modify history
history.pushState(obj, title, url);


Где:

  • obj  является любой объект JavaScript. Вы можете использовать этот код, чтобы сохранить информацию о состоянии:
    
    
     { “view”: “EMAILCONTENT”, “item”: 123 };
    
    
    
  • title  является дополнительным названием
  • url  является необязательным. URL может быть всё что угодно, браузер не будет прыгать на этой странице, если пользователь не выполнит перезагрузку страницы или перезапуск браузера. В большинстве случаев, Вы будете использовать параметры или хэш названия, например:  view=EMAILCONTENT&item=123; Ваше приложение может анализировать эти значения при запуске и вернуться на то же место.

history.replaceState() имеет одинаковые аргументы и используется если вы хотите заменить текущее состояние на новое.

Функция обработчик, которая запускается после нажатия кнопки «назад», или кнопки «далее» в браузере:



window.addEventListener("popstate", function(e) {
	// URL location
	var location = document.location;
	// state
	var state = e.state;
	// return to last state
	if (state.view == "EMAILCONTENT") {
		...
	}
});


Местоположение URL может быть определено с  document.location  (  document.location.search  и document.location.hash  вернуть параметры и хэш названия соответственно).

Состояние объекта PushState() или replaceState() получается из объектов событий состояния свойств. Вы можете использовать эту информацию для отображения соответствующего экрана.

Демо

Нажмите на кнопку history.pushState   несколько раз, затем вернитесь, чтобы увидеть, что происходит в журнале.

1 комментарий на тему “Изменить историю браузера”

  1. Наконец то нашел понятное объяснение, спасибо, никак не мог понять как ссылку вытянуть, а теперь понял

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


8 + 9 =

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>