Кнопка - Назад - та JavaScript

коли

Перетягування – це чудовий спосіб для користувачів взаємодіяти з веб-застосунками. Але зручність використання буде втрачено, якщо, провівши час переміщення по додатку, користувач натискає кнопку Назад очікуючи повернутися на одну сторінку, і натомість опиняється на своєму стартовому екрані. У цій статті ми покажемо вам, як використовувати HTML5 в API, щоб уникнути таких результатів.

Проблема може бути просто продемонстрована. Все, що вам потрібно, це функція, яка оновлює сторінки у відповідь на дії користувача:

І маленька замітка:

У реальному житті, ваша веб-сторінка робила б щось складніше, – наприклад, отримання нового змісту з сервера через AJAX, але простого оновлення достатньо для демонстрації концепції. Давайте подивимося, що відбувається, коли користувач відвідує сторінку:

DoClick() функція може бути оновлена ​​для того, щоб скористатися перевагою історії API. Щоразу, коли сторінка оновлюється, вона також встановлюватиме location.hash:

  1. Користувач переходить на веб-сторінку Click Me
  2. Зверніть увагу, що тепер URL оновлюється після кожного натискання, і наприкінці його з'являється “#”
  3. Тепер при натисканні кнопки Назад розташування переноситься назад в #2, демонструючи, що стан сторінки було успішно додано в історію. Але зверніть увагу, що при натисканні кнопки Назад сторінка не переходить автоматично у вихідний стан.

Оновлення стану веб-сторінки

Оновлення історії є лише частиною проблеми, ви також повинні оновити стан сторінки відповідно до стану історії. Оскільки ви є тим, хто керує історією, це ваше завдання керувати станом сторінки. Для того щобоновити сторінку, у відповідь змінюється location.hash, і ви можете прослухати hashchange події:

DoClick() функція тепер тільки відповідає за оновлення тимчасових змінних та змін хеш. Hashchange події знаходяться у вікні об'єкта; коли це відбувається, ви переконаєтесь, що хеш існує. У реальному додатку вам також потрібно було б переконатися, що у нього є правильне значення. Далі, ви встановите значення разів, щоб бути номером в хеш. Нарешті ви оновите документ, щоб він відображав правильний стан сторінки. Давайте подивимося на цей новий код:

  1. Як і раніше, хеш в URL оновлюється, кожного разу, коли користувач натискає кнопку.
  2. Але тепер, коли натискається кнопка Назад, функція запускається і на стан сторінки скидається відповідно до URL.