Статьи

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

Октябрь 10, 2018

Разве вы не любите быстрые названия ?!

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

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

Взрыва. Приложение закрывается и возвращается на страницу, которую они просматривали до доступа к приложению. Или, если это новая вкладка браузера, кнопка «Назад» отключена и не может быть нажата.

Итак, у нас есть проблема. Наш клиент веб-почты не поддерживает тот элемент управления браузера, который понимают большинство пользователей. Есть решения. Некоторые включают изменение хеш-метки (#name) в URL, чтобы сохранить состояние. Это не идеально, но работает во всех браузерах.

К счастью, проблема была решена с помощью методов HTML5 history.pushStatehistory.replaceStatewindow.onpopstate

Попробуйте демонстрационную страницу history.pushState ()…

Техника очень проста:

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

Обратная сторона? Забудьте о совместимости IE, пока не появится v10. Если вам нужна поддержка IE9 и ниже, есть несколько оболочек, включая History.js и HTML5-History-API .

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

 
// Ajax request
...
// display result
...

// modify history
history.pushState(obj, title, url);

Где:

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

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

Теперь вам нужна функция-обработчик, которая запускается при срабатывании события popstate окна после нажатия кнопки «Назад» или «Следующая» в браузере: 

 
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.locationdocument.location.searchdocument.location.hash

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

Попробуйте демонстрационную страницу history.pushState ()…

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

Очень полезный. Возникали ли у вас проблемы с кнопками «Назад» и «Далее» в веб-приложении?

43
Share: