HTML5, JavaScript: Динамическая подмена URL без перезагрузки страницы

2012-12-03

HTML5 предусматривает возможность динамической подмены адреса страниц без их перезагрузки с помощью JavaScript. Это может быть необходимо для корректного отслеживания состояния динамических страниц.

Делается это с помощью методов pushState() или replaceState() объекта window.history.

При изменении адреса странички методом pushState(), он добавится в историю просмотров, а метод replaceState() заменит текущий адрес в истории просмотров.
К примеру, если мы находимся на страничке «page1.html» и заменим её на «page2.html» методом pushState(), а потом нажмём кнопку «Назад» в браузере или воспользуемся методом back(), то мы попадём обратно на страничку «page1.html». В случае с методом replaceState() — этого не произойдёт.

Пример:

// эмуляция перехода на страничку "/page2.html" без перезагрузки странички
history.pushState(2, "Title 2", "/page2.html");
// замена текущего URL на "/page3.html"
history.replaceState(3, "Title 2", "/page3.html");

С помощью 1-го параметра функции можно идентифицировать «состояние страницы» при переходе по истории.
К примеру: если отлавливать событие смены состояния страницы (событие: «popstate»), затем сделать несколько переходов функцией «pushState», и затем нажать кнопку «Назад», то в параметре «state» события мы получим значение этого 1-го параметра, который был передан во время установки данной страницы. Значение данного параметра может быть также и объектом.

Пример:

// Устанавливаем обработчик события "popstate":
window.addEventListener('popstate', function(event) {
// выводим в консоль данные состояния страницы "event.state":
console.log("Page state data:", event.state);
}, false);
// эмуляция перехода на страничку "/page4.html"
history.pushState(4, "Title 4", "/page4.html");
// затем - на страничку "/page5.html"
history.pushState(5, "Title 5", "/page5.html");

И вот если после выполнения этого кода нажать кнопку «Назад» в браузере, то мы получим в консоли такое сообщение:

>> Page state data: 5

Из соображений безопасности, нельзя изменить доменное имя.

На момент написания страницы динамическая подмена URL работала только в FireFox 4 и в последних версиях браузеров на движке WebKit (Chrome, Safari).
(На момент обновления: уже работает в Opera)
Не смотря на это, данный механизм уже интенсивно используют в facebook.com, vkontakte.ru и другие.

Более подробную информацию об этом функционале можно найти здесь:
http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html
http://www.w3.org/TR/2010/WD-html5-20101019/history.html#dom-history-pushstate



10 комментариев на «HTML5, JavaScript: Динамическая подмена URL без перезагрузки страницы»

  1. Нашла то , что искала , спасибо вам .

  2. Дмитрий:

    Так и не врубился «object or string» что это? какие данные там указываются. В указанных ссылках описано как anyData. Если любые данные, то нахера он вообще обязательный и тем более идет первым параметром.

  3. Было бы не плохо дополнить статью инфой про первый параметр. Как я понял, это некий объект, который сохраняется в хистори барузером для каждого урла, который можно прочитать нажимая «назад» и «вперед»

  4. admin:

    Модифицировал статью.
    Надеюсь, теперь будет более все понятно.

  5. Хорошо что нельзя менять домен … а то можно попасться на удочку)))

  6. admin:

    Ну да… Это ж из соображений безопасности

  7. Vic:

    Здравствуйте!
    Подскажите пожалуйста, есть ли возможность сделать весь сайт рабочий на JavaScript, при этом чтобы осталась хорошая индексация поисковиков?

  8. admin:

    На сколько мне известно, основные поисковики умеют парсить ajax-сайты если они подготовленны должным образом:
    http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=174992
    http://www.searchengines.ru/news/archives/yandeks_uluchsh.html
    http://habrahabr.ru/company/roundlake/blog/140291/
    Правда, на личном опыте еще не проверял.
    Ранее я подготавливал упрощенную статическую версию специально для поисковиков.

  9. Спасибо за статью. Я тоже рассматривал этот вопрос: http://plutov.by/post/html5_history_api

  10. вот интернет магазин http://novye-podarki.ru полностью на JavaScript . Все страницы проиндексированы . Фокус в предварительной нарезке сайта на статичные странички.

Добавить комментарий