Как я могу изменить URL страницы, не обновляя страницу? - PullRequest
24 голосов
/ 25 мая 2011

Как изменить URL без обновления страницы?

Я создал сайт с CodeIginer и хочу внедрить AJAX и JQuery на одной из моих страниц.Проблема в;когда я загружаю контент, URL не меняется.

Допустим, у меня есть URL http://www.example.com/controller/function/paramИ еще один URL: http://www.example.com/controller/function/param2

Как изменить первый URL-адрес на второй, когда я нажимаю кнопку?

Ответы [ 4 ]

31 голосов
/ 25 мая 2011

В HTML5 вы можете изменить URL:

window.history.pushState("object or string", "Title", "/new-url");

проверить http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

документы: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method


ОБНОВЛЕНИЕ

Обзор того, какой браузер поддерживает новый API истории HTML5:

http://caniuse.com/#search=pushState (caniuse.com стоит добавить в закладки!)

уже естьфреймворки, которые выполняют тяжелую работу за вас и даже изящно прибегают к общему решению хеш-тегов:

History.js

History.js изящно поддерживает API истории / состояния HTML5 (pushState, replaceState, onPopState) во всех браузерах.Включая постоянную поддержку данных, заголовков, replaceState.Поддерживает jQuery, MooTools и Prototype.Для браузеров HTML5 это означает, что вы можете изменить URL-адрес напрямую, без необходимости больше использовать хэши.Для браузеров HTML4 он вернется к использованию старой функциональности onhashchange.

Backbone.js

Структура магистральных поставокприложениям, насыщенным JavaScript, предоставляя модели с привязкой значения ключа и пользовательскими событиями, коллекции с богатым API перечислимых функций, представления с декларативной обработкой событий и подключая все это к существующему приложению через интерфейс RESTful JSON.... поддержка pushState существует исключительно в Backbone.В старых браузерах, не поддерживающих pushState, будут по-прежнему использоваться фрагменты URL-адресов на основе хэша, а если браузер с поддержкой pushState посещает хэш-URL-адрес, он будет прозрачно обновлен до истинного URL-адреса.

Mootools (через плагин)

MooTools - это компактная модульная объектно-ориентированная среда JavaScript, предназначенная для среднего и продвинутого разработчика JavaScript.[...] Управление историей через popstate или hashchange.Заменяет URL страницы без перезагрузки и возвращается к Hashchange в старых браузерах.

dojo toolkit

Dojo экономит ваше время и масштабирует процесс разработки, используя веб-стандарты в качестве своей платформы.Это набор инструментов, к которому обращаются опытные разработчики для создания высококачественных настольных и мобильных веб-приложений.[...] dojox.app управляет историей навигации с помощью стандарта HTML5 pushState и передает его в управление историей с поддержкой браузера.

... просто назвать несколько.


(!!) BE AWARE

Один важный побочный эффект при использовании pushState (цитата из документации Backbone ):

Обратите внимание, что для использования реальных URL-адресов требуется, чтобы ваш веб-сервер мог корректно отображать эти страницы , поэтому требуются также внутренние изменения.Например, если у вас есть маршрут / Documents / 100, ваш веб-сервер должен быть в состоянии обслуживать эту страницу, если браузер посещает этот URL напрямую.Для полной возможности поиска в поисковой системе лучше всего, чтобы сервер сгенерировал полный HTML-код для страницы ... но если это веб-приложение, просто отредактируйте тот же контент, что и для корневого URL-адреса, и заполните остальное с помощью Backbone.Представления и JavaScript работают отлично.

9 голосов
/ 25 мая 2011

Можно использовать хеш ( # ) и потом положить что угодно.

Вот сайт, который я создал с помощью этого - и затем у меня есть JavaScript, прочитавший хеш и вызвавший соответствующие функции:

http://bannerhouse.com.au/#/popup=media&id=don

Примечание:

Это полезно для флеш-сайтов или флеш-контента; Вы можете использовать FlashVars для анализа значения хеш-функции в SWF и загрузки соответствующего раздела / экрана на основе этого.

4 голосов
/ 25 мая 2011

Используйте хеш-теги через Javascript, поэтому в обработчике события нажатия кнопки: location.hash = "param2", который изменит http://example.com/mypage/#whatever на http://example.com/mypage/#param2

Конечно, вы также можете поместить свои «папки»после хеша, таким образом, с базовым URL-адресом http://example.com/ вы затем добавляете: location.hash = "/MyPage/MySubPage/MyInfo";, который изменяет его на http://example.com/#/MyPage/MySubPage/MyInfo

1 голос
/ 25 мая 2011

A аналогичная нить не выводит no, если только не используется хеш-тег.

Одна из выдвинутых, но решительно не одобряемых идей - использовать HTTP-ответ 204.

ОтW3:

Нет ответа 204

Сервер получил запрос, но информация для отправки отсутствует, и клиент должен оставаться в том же виде документа.Это главным образом позволяет вводить сценарии без одновременного изменения документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...