Змінити історію браузера в складних додатках

... просто в браузері натисне кнопку назад.

Вміст листа закриється і відкриється сторінка зі списком листів, де користувач був до відкриття вмісту листа. А якщо це нова вкладка браузера? Кнопка повернення не буде працювати і не може бути натиснута. Виникає проблема. У нашій електронній пошті не підтримується контроль в одному з браузерів більшість користувачів це розуміють. Але є рішення! Деякі пов'язані зі зміною решітки (# ім'я) в 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:

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

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

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

Стан об'єкта PushState () або replaceState () виходить з об'єктів подій стану властивостей. Ви можете використовувати цю інформацію для відображення відповідного екрану.

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

цікаві записи

Схожі статті