Как справиться с обновлением страницы с помощью 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. Не отличное решение, но, похоже, оно работает хорошо.