Днями проводив експерименти з завантаженням всіх сторінок сайту за допомогою технології AJAX і можливістю звернення до такмі сторінок безпосередньо за допомогою #hash. Вообщем хоч це і кросбраузерності спосіб, він мені здався не дуже зручним, та ще й громіздким. І тут я згадав, що в HTML5 можна управляти історією браузера. «Ось він - веб-сайт моєї мрії!» Подумав я.
Відразу наведу код сторінки з прикладом.
На сторінці є 3 посилання, на кожній з яких встановлено події onclick, яке викликає функцію followLink (event, this). Функція приймає два параметри, подія і посилання на елемент.
Головна особливість функції це виклик методу pushState:
Коли користувач переходить на нову сторінку з повним її оновленням, то браузер запам'ятовує новий URL в історії браузера. Якщо користувач натискає кнопку «Назад», то браузер зрушує одну сторінку в історії і повертає її користувачеві. Але тепер, коли повного перезавантаження сторінки не відбувається, то і ніякого збереження в історії не відбувається теж.
Також зверніть увагу, що якщо буде натиснута кнопка «Оновлення сторінки» або спроба звернутися до цієї сторінки безпосередньо, нічого не відбудеться. Так що в движку сайту повинен бути передбачений механізм завантаження сторінок сайту і з повною перезавантаженням.
History API підтримують такі браузери:- Firefox 4.0+
- Safari 5.0
- Chrome 8.0+
- Opera 11.10+
- IE 9.0