Как справиться с обновлением страницы с помощью JS History API pushState

Небольшой веб-сайт, который я создавал (более похоже на вождение), использует AJAX для загрузки каждой страницы. Раньше я менял хэш URL-адреса, это отлично работало, но было уродливо, и пользователь мог обновить страницу, и он остался бы на одной странице.

Теперь я переключился на использование pushState в API истории JS, который выглядит намного лучше, а работа назад и вперед, но обновление - нет. Например:

Переход к: http://example.com/page2 переходит на 404, поскольку нет реальной страницы, называемой страницей 2. Но если я нажму кнопку, которая использует метод pushState для изменения URL-адреса, он работает так, как должен.

Как разрешить обновления и постоянные ссылки с помощью нового API истории?

(И как поисковые системы рассматривают это, поскольку Google должен был создать способ индексирования хеш-ссылок, заставив разработчика перейти на #!, возможно ли, что они будут делать что-то подобное для истории api в будущем?)

Ответ 1

Вы не должны использовать pushState, чтобы нажимать неверные URL-адреса. Он предназначен для использования в тех случаях, когда сайт работает как с AJAX, так и без него, т.е. Вы нажимаете URL-адрес, который приведет к тому же выводу без AJAX при создании этого вывода с помощью AJAX.

Если вам нужны только виртуальные URL-адреса (например, в эпоху pre-pushState), продолжайте использовать хэш-тег.

Ответ 2

Это несколько старый вопрос, но он был одним из лучших результатов Google. В стремлении быть полезным, вот мое решение.

Вы можете использовать Apache Mod_Rewrite, чтобы переписать URL-адрес в центральное место. Например: example.com/p2 получает содержимое своей страницы из example.com/index.php?page=p2 Вы можете сохранить свою текущую реализацию API истории и AJAX для получения контента и включить следующее в свой .htaccess

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^([^/\.]+)/?$ index.php?page=$1&full=1 [L]
</ifModule>

В вашем index.php:

<?php
  if(isset($_GET['full']) {
    //Generate the full page here
  }else{
    //Generate just the content for AJAX
  }
?>

Эта страница является хорошим пособием по использованию mod_rewrite для перенаправления всего веб-сайта. (Комментарии 11 и 13 также имеют полезные дополнения)

Ответ 3

Мне пришлось перенаправить 404 ошибки на домашнюю страницу сайтов (ту, которая загружает запросы AJAX), а затем получить последний компонент URL-адреса и запустить функцию javascript, которая загружает страницу с помощью запроса AJAX. Не отличное решение, но, похоже, оно работает хорошо.