Практичний AJAX що робити з кнопкою «назад» у браузерах

Суть проблеми

Малюнок 1. Горизонтальні посилання

Веб-сайт та веб-додаток

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

Як приклад веб-сайту можна розглянути Yahoo! Finance та E*TRADE — як веб-додаток. З точки зору користувача я можу сказати, що не завжди можна провести чітку межу між цими двома типами. Однак, веб-розробникам варто з самого початку визначитися, що вони збираються розробляти: сайт або програми? Якщо вам це зрозуміти, то можна поставити просте питання: без інтернету чим найкраще описується ваша розробка: це набір Word'ових документів або ж настільний додаток? Розглядайте веб-програми нарівні з настільними з тією лише різницею, що першим ще потрібен браузер для нормальної роботи. Інше питання, яке можна собі поставити, звучить так: «Вашою головною метою буде надання інформації чи забезпечення функціональності?».

Найлегше просто не брати до уваги непрацездатність кнопки «назад» у браузері, але повністю цим нехтувати не можна. Замість того, щоб створювати цілісний додаток, що використовує велику кількість вертикальних посилань і прив'язаний до єдиного URL, створіть деяку кількість горизонтальних посилань в тих місцях, де це дійсно потрібно. Іншими словами, використовуйте горизонтальні посилання для розділення частин вашої програми, наприклад, таким чином, як це робиться в паперовій літературі (книга ділиться на частини та розділи). Використовуючирозумну комбінацію традиційних горизонтальних посилань з вертикальними, можна досягти балансу потужності AJAX та можливості використовувати функціонал переміщення з історії браузера.

Друге рішення: використовуйте спеціальну бібліотеку AJAX

Прим.: нижче згруповані основні методи створення псевдо-горизонтальних посилань, я постарався доповнити їх відомими прикладами, розширивши список статті-першоджерела.

    Примітка: суть рішення: при кожному виклику AJAX до URL'у сторінки в якості якоря додається поточний номер елемента в стеку «історії», що фактично збільшуються числа. При натисканні кнопки «назад» у браузері URL сторінки змінюється на попередній. Кожні 100 (200, 400, 1000) мілісекунд сторінка перевіряє, чи не змінився у неї якір в URL'і, якщо якір змінився, то здійснюється підвантаження даних, що відповідають поточному якорю (=елементу в стеку «історії»).

Plex - AJAX framework з відкритим кодом, який підтримує дуже багато можливостей, у тому числі, і емуляцію кнопки "назад" у браузері.

Dojo - ще один AJAX framework з відкритим кодом, що забезпечує деяку AJAX функціональність та емуляцію кнопки "назад" у браузері.

Опис підходу та демо-версія.

  • Існує також ряд інших підходів, зокрема, з використанням document.save() або document.body.onbeforeunload() , які не є кросбраузерними.

    • Не можу також не згадати про непогану оглядову статтю Vladimira Kelmana, де обговорюються частина вищезгаданих рішень.

    Рішення третє: забезпечте користувачам зручну альтернативу кнопки «назад»

    Однак найгіршим рішенням з усіх, які я бачив, є створення альтернативної кнопки «назад» в межах самої веб-сторінки, використовуючи AJAX-методи.Багато користувачів важко змогли звикнути до кордону між браузером і веб-сторінкою, змогли зрозуміти, де закінчується браузер і починається, власне, сама сторінка. Немає жодної необхідності посилювати їх незручності. Адже ви не можете гарантувати, що користувачі, які легко з цим впоралися, зможуть звикнути ще до однієї «інновації» і змінять свої звички заради вашого сайту. Забезпечити користувачів альтернативною навігацією та функціоналом буде цілком достатньо, але ніяк не створювати цю кнопку знову.

    Наприкінці, якщо ви все ж таки обмежуєте функціонал стандартної історії в браузері при створенні веб-програми, будь ласка, повідомите користувачів про це тим чи іншим способом. AJAX не є першим методом, який обмежує цей функціонал, і, швидше за все, користувачі вперше дізнаються про це також не від вас. (Є ще аплети, Flash та eCommerce додатки, які можуть зняти з кредитної картки суму ще раз, якщо натиснути кнопку «назад» у браузері.) Вага відповідальності, яку ви, в кінцевому рахунку, покладете на користувача за його дії на сайті, буде залежати від вашої корпоративної культури, але чому б не зробити його трохи легшим?

    А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»