Comments / Profile of iDevArtem / Habr

Artem Doink @iDevArtem

User

Profile Publications Comments 5Bookmarks 65

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

iDevArtem Oct 30 2013 at 20:12

Вы либо меня не поняли

…

И к слову вместо ?page=1 и ?page=2, можно сделать красивые /page1 и /page2

Это понятно… ?page=1 и ?page=2 взяты из примера самой статьи

нужно будет чутка только в .htaccess подшаманить, чтоб букмарки открывались так, как ожидает пользователь

Пишу на python/django по-этому ничего шаманить не надо

Я может придираюсь через чур, но как заметили ниже, статья введение на хабре уже была, раз уж это уже вторая о том же, можно было бы довести до полезного на практике примера.

с этим я согласен… но акцент был на поддержку браузеров (то бишь даже ie поддерживает)

Look

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

iDevArtem Oct 30 2013 at 15:29

Сорри… Да, в Опере 12 работает.
До этого тестил в Хроме, там это не работает, по этому дал такой ответ.

Look

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

iDevArtem Oct 30 2013 at 15:02

Для примера это имя вы можете увидеть при продолжительном нажатии на кнопки back/forward, то есть попробуйте нажать левой клавишей мыши на одну из этих стрелок с небольшой задержкой, откроется список, вот в нем и будут отображаться те самые имена что были занесены во второй параметр.

Параметр title никак к этому не относится!
В историю вписывается то что в: <title>Some Title</title>
или в случае с javascript'ом: document.title = "Some Title";

Look

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

iDevArtem Oct 30 2013 at 14:33

осталось только дописать как хранить динамический контент в event.state

Не самый лучший вариант, но тоже имеет право на жизнь :)

<html>
<head>
  <title>Some Title</title>
</head>
<body>
  <a href="?page=1" title="Title 1">Page 1</a>
  <a href="?page=2" title="Title 2">Page 2</a>
  <a href="?page=3">Page 3</a>

  <script>
    window.onpopstate = function (event) {
      document.title = event.state.title;
    };
    var a = document.querySelectorAll('a');
    for (var i=0; i < a.length; i++) {
      a[i].onclick = function() {
        var title = document.title = this.title ? this.title : this.innerHTML;
        history.pushState({title: title}, "", this.href);
          return false;
        }
      }
    </script>
</body>
</html>

Look

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

iDevArtem Oct 30 2013 at 13:01

А вот второй параметр (title), не работает для большинства браузеров, title страницы надо вручную менять через document.title чтобы работало как положено

Ну это не проблема… Исходя из примера:

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

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

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

Look