Есть ли способ изменить адресную строку браузера без обновления страницы?

Question

Я занимаюсь разработкой веб-приложения. В нем есть раздел под названием категории, в котором каждый раз, когда пользователь нажимает на одну из категорий, панель обновления загружает соответствующий контент.

После того, как пользователь щелкнул по категории, я хочу изменить URL адресной строки браузера с

www.mysite.com/products 

к чему-то вроде

www.mysite.com/products/{selectedCat} 

без обновления страницы.
Есть ли какой-нибудь JavaScript API, который я могу использовать для достижения этой цели?

Answer 1

С HTML5 вы можете изменить URL без перезагрузки:

Если вы хотите сделать новое сообщение в истории браузера (т.е. кнопка «Назад» будет работать)

window.history.pushState('Object', 'Title', '/new-url');

Если вы просто хотите изменить URL, не имея возможности вернуться назад

window.history.replaceState('Object', 'Title', '/another-new-url');

Объект может быть использован для навигации ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

Подробнее здесь: http://www.w3.org/TR/html5-author/history.html

Резервное решение: https://github.com/browserstate/history.js

Answer 2

Чтобы добавить к тому, что ребята уже сказали, отредактируйте свойство window.location.hash, чтобы оно соответствовало URL, который вы хотите использовать в функции onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

Answer 3

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

www.mysite.com / продукты / # {selectedCat}

т.е. ссылку стиля якоря на той же странице, затем посмотрите на различные сценарии истории / «кнопки назад», которые теперь присутствуют в большинстве библиотек javascript.

Упоминание о панели обновлений заставляет меня догадываться, что вы используете asp.net, в этом случае хорошим примером для начала является контроль истории ajax asp.net

Answer 4

Я не думаю, что это возможно (по крайней мере, изменение на совершенно другой адрес), так как это будет нецелесообразным неправильным использованием адресной строки и может способствовать фишинговым атакам.

Answer 5

"window.location.hash"

как предполагает sanchothefat, это должен быть единственный способ сделать это. Поскольку во всех местах, где я видел эту функцию, все время идет после # в URL.

Answer 6

Это не может быть сделано так, как вы говорите. Метод, предложенный somej.net, является самым близким, который вы можете получить. На самом деле это очень распространенная практика в эпоху AJAX. Даже Gmail использует это.