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

Question

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

<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 также содержат полезные дополнения)

Answer 3

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