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

92

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

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

www.mysite.com/products

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

www.mysite.com/products/{selectedCat}

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

url address-bar Луизо
источник

Ответы:

158

С 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

Альфред
источник
4
+1 Также обратите внимание; они изменяют pathи / или query stringв URL-адресе; они не могут изменить протокол, домен или порт (поскольку это было бы проблемой безопасности, как указывали другие). hashВыше функция может изменить якорь (или фрагмент ID)
Chris S
2
просто говорю, что в вашем примере '/ item / 35'} добавлено дополнительное}
Zhanger
Как побочный вопрос, есть ли способ включить эти URL-адреса для индексации в Google?
Питер Физерстоун
1
Лучшей библиотекой кажется github.com/browserstate/history.js, она активно поддерживается и широко используется, тогда как fortes-history.js простаивал 3 года.
Gonfi den Tschal 09
2
Обратите внимание, что firefox не поддерживает заголовок, поэтому используйте document.title = "new title".
0fnt
31

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

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
Роборк
источник
есть ли способ изменить URL-адрес без символа '#' в URL-адресе?
SHEKHAR SHETE
7

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

www.mysite.com/products/#{selectedCat}

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

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

Джастин Уигнал
источник
3

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

Гальский
источник
Вместо того чтобы быть неинтуитивным, я думаю, вы не должны этого делать, потому что это может быть использовано для фишинговых атак. Во всяком случае, это +1.
OregonGhost,
Да, это только что пришло мне в голову. Не хорошая идея. Спасибо, OregonGhost.
Galwegian
1
Я действительно думаю, что это возможно ... Проверьте Wikimapia ... Когда вы перетаскиваете карту, URL-адрес изменяется ...
Шивасубраманиан А
@ Shivasubramanian-a: Я посмотрел на Wikimapia, и действительно, они просто используют технику, предложенную somej и описанную sanchothefat: просто меняя имя привязки. Что безопасно от фишинга ...
PhiLho
-1

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

аалаап
источник
-1

"window.location.hash"

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


источник