Кнопка “Назад” и JavaScript

Одна из главных проблем с JavaScript приложениями является то, что они ломают функцию кнопки Назад (Back). Если вы обновляете содержимое на странице с JavaScript вместо загрузки новой страницы с сервера, то тогда не делается запись в истории браузера, поэтому когда пользователь нажимает кнопку Назад, ожидая возвращения к предыдущему состоянию, он в конечном итоге оказывается на предыдущем веб-сайте.

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

Проблема может быть продемонстрирована просто. Все, что вам нужно, это функция, которая обновляет страницы в ответ на действия пользователя:

var times = 0;
function doclick() {
    times++;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

И маленькая заметка:

<div onclick="doclick();">Click Me</div>
<div id="message">Recorded <b>0</b> clicks</div>

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

1. Пользователь запускает свою домашнюю страницу и решает посетить удивительное Click Me приложение, о котором он столько слышал.
2. Он вводит адрес или переходит по ссылке из электронной почты, чтобы добраться до Click Me веб-страницы.
3. Через несколько секунд после приятного взаимодействия, состояния веб-страницы изменилось несколько раз.
4. Но, когда пользователь нажимает кнопку Назад в браузере, он обнаруживает, что вместо того, чтобы вернуться к предыдущему состоянию страницы, они перепрыгивает обратно на домашнюю страницу.

DoClick() функция может быть обновлена, для того чтобы воспользоваться преимуществом истории API. Каждый раз, когда страница обновляется, она также будет устанавливать location.hash:

function doclick() {
    times++;
    location.hash = times;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

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

Обновление состояния веб-страницы

Обновление истории является лишь частью проблемы, вы также должны обновить состояние страницы в соответствии с состоянием в истории. Так как вы являетесь тем, кто управляет историей, это ваша задача управлять состоянием страницы. Для того чтобы обновить страницу, в ответ меняется location.hash, и вы можете прослушать hashchange события:

function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {       
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
    document.getElementById('message').innerHTML =      
        'Recorded <b>' + times + '</b> clicks';
}

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

1. Как и прежде, хэш в URL обновляется, каждый раз когда пользователь нажимает кнопку.
2. Но теперь, когда нажимается кнопка Назад, onhashchange функция запускается и состояние страницы сбрасывается в соответствии с URL.

Использование location.hash

Собственность Location.hash и связанных с ним событием hashchange полезно, если вы хотите отметить определенные просмотры вашего приложения и позволить пользователю перемещаться между ними. Google Mail использует этот подход, позволяя вам перемещаться между вашим почтовым ящиком (# почтовый ящик), контактами (# контактами), и другими просмотрами. Если у вас есть аккаунт Gmail, посмотрите, что происходит с URL, когда вы навигируете по различным страницам и затем нажимаете кнопку Назад.

Но что касается состояния об информации, то только хеш позволяет хранить эту строку. Вы могли бы кодировать более сложный объект, но URL быстро станет длинным и громоздким и не будет запоминающимся для ваших пользователей. Если вам нужно сохранить более сложную информацию как часть истории, лучшим подходом было бы использовать хэш в качестве ключевого звена, чтобы вытянуть дополнительную информацию о состоянии из других хранилищ. Для этого HTML5 предоставил вам API с history.pushState() методом и popstate событием. Эти методы позволяют сохранить и перезагрузить сложные объекты.

Высоких конверсий!