Я разрабатываю веб-приложение. В нем у меня есть раздел под названием категории, который каждый раз, когда пользователь нажимает на одну из категорий, панель обновления загружает соответствующий контент.
После того, как пользователь нажал категорию, я хочу изменить URL-адрес адресной строки браузера из
www.mysite.com/products
к чему-то вроде
www.mysite.com/products/{selectedCat}
без обновления страницы.
Есть ли какой-то JavaScript API, который я могу использовать для достижения этого?
С 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
Чтобы добавить к тому, что уже сказали ребята, измените свойство window.location.hash, чтобы он соответствовал требуемому URL-адресу в вашей функции onclick.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
Я считаю, что напрямую манипулировать адресной строкой на совершенно другой URL-адрес, не переходя к тому, что URL-адрес не разрешен по соображениям безопасности, если вы довольны тем, что он
www.mysite.com/products/# {selectedCat}
то есть. ссылку на привязку в одной и той же странице, а затем загляните в различные сценарии истории/ "назад", которые теперь присутствуют в большинстве библиотек javascript.
Упоминание панели обновления приводит меня к предположению, что вы используете asp.net, в этом случае управление историей asp.net ajax является хорошим местом для запуска
Я не думаю, что это возможно (по крайней мере, изменение на совершенно другой адрес), поскольку это было бы неинтуитивным неправильным использованием адресной строки и могло бы способствовать фишинг-атакам.
Это невозможно сделать так, как вы это говорите. Метод, предложенный somej.net, является самым близким, который вы можете получить. Это на самом деле очень распространенная практика в возрасте AJAX. Даже Gmail использует это.
"window.location.hash"
как было предложено sanchothefat, должен быть единственным и единственным способом сделать это. Поскольку все места, которые я видел эту функцию, это все время после # в URL.