Если вы хотите использовать единую структуру URL, которая может работать как с JS, так и с браузерами, не поддерживающими JS, вы можете проверить, поддерживает ли браузер JS, и соответственно изменить ссылки навигации. Если браузер поддерживает / включил JS, добавьте хеш и получите страницу, используя window.location.hash
. Пример URL:
site.com/#photos/1
Если он не поддерживает JS, ваш URL будет выглядеть так:
site.com/photos/1
Таким образом, вам нужно всего лишь добавить #
к URL. Это легко сделать либо в самом скрипте, либо изменить ссылки на странице с помощью jQuery после загрузки страницы. Вы можете использовать (предполагая Apache / PHP) Apache ModRewrite, чтобы переписать URL-адрес примерно так:
site.com/index.php?p=photos&show=1
Допустим, сайт загружается впервые, а браузер не поддерживает JS, загружайте все, что должно быть загружено обычным способом, в зависимости (в данном случае) от переменных "page" и "show". Если он поддерживает JS, вы можете хранить переменные следующим образом:
<div style="display:none;" id="page">photos</div>
<div style="display:none;" id="show">1</div>
<div id="content"></div>
и после загрузки страницы вы запускаете jQuery и извлекаете навигационные данные:
var page = $('#page').html();
var show = $('#show').html();
и делайте все, что нужно, чтобы показать правильную страницу.
Когда вы нажимаете новые ссылки, вы можете использовать различные плагины jQuery для навигации по хешу, или страница просто загружается обычным способом, когда нет JS и, следовательно, нет хеша в ссылках.
Чтобы предотвратить дублирование кода, вам нужно настроить свои страницы таким образом, чтобы их можно было легко отображать обычным способом и через jQuery. Допустим, у вас есть эта страница с фотографиями, вы можете включить «photos.php» при просмотре без JS и использовать тот же файл с помощью jQuery:
$.get(page + '.php', {
show: show
}, function(data) {
$('#content').html(data);
});
Поскольку "photos.php" будет видеть те же самые переменные $_GET
, выходные данные будут одинаковыми.
У вас будет какое-то совпадение. Если вы хотите отобразить / опубликовать форму, например вы, вероятно, будете обрабатывать это иначе, чем когда вы обрабатываете это через jQuery. Обычный способ обработки данных формы и отображения обновленной страницы. Так что в случае с «photos.php» вам понадобится полный вывод. Но при использовании jQuery вам нужен только результат, например, говорит "сделано" и измените страницу, не перезагружая ее полностью. Эту проблему можно решить, добавив еще несколько переменных в функции $.get
(или $.post
).
Возможно, вы захотите изучить (PHP) фреймворки MVC. При использовании настройки MVC вы можете отделить всю логику сайта (навигацию / запросы к базе данных и т. Д.) От представления (то есть того, что отображается на сайте). Это действительно упрощает использование такой же логики, но отдельных представлений для, в данном случае, сайтов с обычным и одним с навигацией на основе jQuery.
В конце концов, вы должны спросить себя, стоит ли переживать все эти неприятности. Для кого сайт? Эти люди действительно используют браузеры без JavaScript? Действительно ли необходимо иметь доступный сайт, который не зависит от JS? В настоящее время в основном все используют браузер, который прекрасно справляется с JS, и время, когда люди отключали его по «соображениям безопасности», давно прошло. Поддержание обеих версий сайта может занять много времени и ресурсов (в зависимости от размера, конечно), так что это может не стоить того. В этом случае проще просто отобразить сообщение или урезанный и упрощенный сайт, в котором говорится, что пользователь должен перейти в 21-й век, чтобы использовать полнофункциональный сайт.