CodeIgniter + jQuery (ajax) + HTML5 pushstate: Как сделать чистую навигацию с реальными URL-адресами?
Сейчас я пытаюсь создать новый веб-сайт, ничего особенного, красивого и маленького, но я застрял в самом начале. Мои проблемы - чистые URL-адреса и навигация по страницам. Я хочу сделать это "правильно".
Что бы я хотел:
- Я использую CodeIgniter для получения чистых URL-адресов, например "www.example.com/hello/world"
- jQuery помогает мне использовать ajax, поэтому я могу .load () дополнительный контент
- Теперь я хочу использовать функции HTML5, такие как pushstate, чтобы избавиться от символа # в URL-адресе
Должна быть возможность перемещаться вперед и назад без обновления страницы, но страница по-прежнему будет отображать правильный контент в соответствии с текущим URL-адресом.
Также должна быть возможность перезагрузки страницу без получения ошибки 404. Сайт должен существовать благодаря CodeIgniter. (есть контроллер и представление)
Например:
Очень простой веб-сайт. Две ссылки, называемые «foo» и «bar», и пустое поле div под ними.
Базовый URL - example.com
.
Когда вы щелкаете по «foo», URL-адрес изменяется на «example.com/foo» без перезагрузки, а блок div получает новое содержимое с jQuery .load (). То же самое и с другой ссылкой, только, конечно, с другим содержанием и URL.
После нажатия "foo", а затем "bar" кнопка возврата вернет меня на "example.com/foo" с соответствующим содержанием. Если я загружу эту ссылку напрямую или обновлю страницу, она будет выглядеть так же. Никакой ошибки 404 или чего-то подобного.
Просто подумайте об этой странице и расскажите мне, как бы вы это сделали. Мне бы очень хотелось иметь такую навигацию, поэтому я попробовал несколько вещей.
Пока ...
Я знаю, как использовать CodeIgniter для получения таких URL. Я знаю, как использовать jQuery для загрузки дополнительного контента, и, хотя я не совсем понимаю, что такое pushstate html5, мне, по крайней мере, удалось заставить его работать.
Но я не могу заставить его работать все вместе.
Мой код сейчас в беспорядке, поэтому я не хочу публиковать его здесь. Я просмотрел разные руководства и скопировал код вместе. Думаю, лучше было бы загрузить мою папку CI.
Некоторые из руководств, которые я просмотрел:
- Погрузиться в HTML5
- Демоверсии HTML5
- Mozilla управляет историей браузера
- Более точная история HTML5
- Github: History.js
(достигнуто максимальное количество ссылок: /)
Я думаю, моя основная проблема в том, что все пытаются сделать его совместимым со всеми браузерами и разными версиями, добавляют скрипты / плагины jQuery и многое другое Меня смущает весь дополнительный код. Между моими тегами сценария больше кода, чем фактического содержимого html. Может ли кто-нибудь опубликовать самый простой метод использования HTML5 для моей примерной страницы?
Моя неудачная попытка:
На моей тестовой странице, когда я вернусь, URL-адрес изменится, но в поле div будет отображаться то же содержимое , а не старый. Я также не знаю, как изменить URL-адрес в скрипте в соответствии с атрибутом href из ссылки. Есть ли что-то вроде $ (this) .attr ('href'), которое изменяется в зависимости от того, по какой ссылке я нажимаю? Прямо сейчас мне пришлось бы использовать скрипт для каждой ссылки, что, конечно, плохо.
Когда я обновляю сайт, CodeIgniter запускается и загружает представление, но на самом деле только само представление, которое я загрузил с помощью ajax, а не всю страницу. Но я думаю, это должно быть легко исправить с помощью макета и правильных настроек контроллера. Еще не обратил на это особого внимания.
Заранее благодарю за любую помощь. Если у вас есть предложения, идеи или просто хотите что-то упомянуть, дайте мне знать.
с уважением
DiLer