Изменение URL без обновления?

Question

Я нашел приложение в Интернете, внутри которого, когда вы нажимаете ссылку, он перенаправляется на страницу без обновления всего места и изменения адресной строки URL-адреса, я знаю, что это возможно, потому что JQuery имеет доступ к браузеру sode клиента.

Пожалуйста, помогите мне с этим.

Answer 1

Простейшим решением является использование фрейма или iframe и установка атрибута a на фрейм (или просто щелчок по ссылке в рамке). Это покажет новую страницу внутри фрейма и адрес frameset-html в строке местоположения.

Answer 2

Вы можете использовать Историю HTML5 API для изменить URL без обновления страницы, проверить этот учебник от Mozilla https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Также проверьте https://github.com/browserstate/History.js для кросса-браузерного решения

JQuery PJAX плагин https://github.com/defunkt/jquery-pjax помогут сделайте то, что вы упомянули, это поможет обновить контент и изменить URL без обновления.

Вот пример: http://pjax.heroku.com/
Исходный код этого примера можно найти здесь: https://github.com/defunkt/jquery-pjax/tree/heroku

Answer 3

с помощью API истории вы могли бы сделать что-то вроде этого

if (history && history.pushState){ 
    history.pushState(null, null, '/new/url'); 
    } 

попробовать его в вашем браузере теперь хром js консоль

это все, что требуется (возможно, немного больше, но это основа

далее в http://diveintohtml5.info/history.html

Answer 4

Если вам нужно распечатать только некоторую информацию, делая это после того, как де приборную символ # не будет перезагружать документ

Answer 5

Это обычно делается либо с использованием новейших HTML5 истории API, или, для старых браузеров, изменяя хэш в URL-адресе. Посмотрите на эту статью: http://dev.opera.com/articles/view/introducing-the-html5-history-api/.

Когда какое-либо действие пользователя запрашивает новую страницу, вместо того, чтобы загружать новую страницу (с новым URL-адресом), страница сохраняет общие свойства (например, заголовок, нижний колонтитул или, скажем, на сайте электронной коммерции, виджет корзины покупок), а оставшееся содержимое выбирается асинхронно через Ajax. После ввода нового контента пользовательский интерфейс изменяется соответствующим образом, а новый state вставляется в стек Истории и соответственно меняет URL. С помощью атрибута data, используемого здесь в качестве словаря, вы храните информацию о том, что показывать, когда пользователь перемещается вперед/назад и снова приходит на эту страницу. Что-то вроде этого:

history.pushState({mydata1: data, mydata2: anotherData},"newTitle",newURL); 

Таким образом, когда пользователь нажимает кнопку Назад браузера, что запись просто выталкивается из стека истории, и из атрибутов данных новой записи в верхней части стека, то отображается новая страница.Текущая страница может быть обновлена, а также:

history.replaceState({mydata1: data, mydata2: anotherData}, "anotherTitle",newURL); 

Вся информация относительно текущей страницы могут быть получены из state:

myState = history.state; 

Если вы заметили, Facebook делает то же самое. Когда вы нажимаете кнопку Home или отправляетесь в профиль друга, новая страница не загружается. Цифра уведомления справа остается такой же, как и она (вместо повторной загрузки новой страницы), если у вас есть окно чата, оно остается как есть. Это связано с тем, что страница не перезагружается на новую страницу (в этом случае все виджеты, включая чат и тикер, также должны перезагружаться), только URL-адрес изменяется динамически, а новый контент извлекается и отображается через Ajax.

При просмотре Facebook в IE8, который не поддерживает History API, вы найдете его по-прежнему работает, но изменить поведение URL отличается. Это связано с тем, что они возвращаются к старым старым способам изменения URL-адресов, меняя хэш.