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


92

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

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

www.mysite.com/products 

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

www.mysite.com/products/{selectedCat} 

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

Ответы:


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.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.