Прекратите использовать location.hash, да здравствует HTML5 History API!

сегодня в 02:13

Много лет location.hash был способом в AJAX-приложении заставить работать кнопки «Назад» / «Вперёд» и позволить добавить определенное состояние страницы в избранное и вернуться к нему позже.

Сейчас, когда HTML5 считается нормой, пора обратить свое внимание на History API и забыть про location.hash. HTML5 History API проще для понимания и позволяет сделать URL чуточку красивее (без кракозябры # или #! если вы имеете дело с индексированием ajax приложения).

Поддержка браузерами

Конечно, IE догнал хорошие браузеры только к 10й версии. Лично я в своих проектах не поддерживаю пользователей IE<=9, но это не значит что у вас тоже хорошие заказчики или вы сам себе заказчик :) В любом случае добавить поддержку старых браузеров не составляет никаких проблем, есть большое число библиотек с hash-fallback, например HTML5 History API, представленная автором на Хабрахабре.

Принцип работы

Всю суть History API я могу изложить в одном прокомментированном куске кода:

// Обработчик back/forward событий
window.onpopstate = function(event) {
  console.log("location: " + location.href + ", state: " + JSON.stringify(event.state));
};

// добавить состояние истории
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");

// заменить текущее состояние
history.replaceState({page: 3}, "title 3", "?page=3");

history.back(); // location: http://example.com/example.html?page=1, state: {"page":1}
history.back(); // location: http://example.com/example.html, state: null
history.go(2);  // location: http://example.com/example.html?page=3, state: {"page":3}

console.log(history.state) // Object {page: 3}

Ну правда же легко? :) Не мучайте больше себя и своих коллег работой с location.hash. У него появился достойный приемник — HTML5 History API.

Developers, stick with Russians – work in London

Переводы с

карты на карту

Переводы

через QR-Код

Новая функция

«Мой контроль»

Возьми Lumia 925 на тест-драйв сейчас.

Впечатляющие возможности

в стильном тонком корпусе из металла

Boomburum

исследует LTE

Эволюция средств связи

в путешествии по России

Проблемы коммуникации внутри бизнеса?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK