Удалить фрагмент в URL с JavaScript без перезагрузки страницы
Справочная информация: у меня есть HTML-страница, которая позволяет вам расширять определенный контент. Поскольку для такого расширения необходимо загружать только небольшие части страницы, это делается с помощью JavaScript, а не путем направления на новую страницу URL/ HTML. Тем не менее, в качестве бонуса пользователь может пермалинк к таким расширенным разделам, т. е. отправить кому-то еще URL, как
и открыть категорию" foobar" немедленно для этого другого пользователя. Это работает с помощью родителей.местоположение.hash = 'foobar', так что эта часть в порядке.
Теперь вопрос: когда пользователь закрывает такую категорию на странице, Я хочу снова очистить фрагмент URL, т. е. включить http://example.com/#foobar в http://example.com/ для обновления дисплея permalink. Однако, делая это с помощью parent.location.hash = ''
вызывает перезагрузку всей страницы (например, в Firefox 3), чего я хотел бы избежать. Используя window.location.href = '/#'
не запускает перезагрузку страницы, но оставляет несколько некрасивый знак "#" в URL-адресе. Итак, есть ли способ в популярных браузерах JavaScript-удалить привязку URL, включая знак"#", не вызывая обновления страницы?
9 ответов
Как уже упоминалось, replaceState В HTML5 можно использовать для удаления фрагмента URL.
вот пример:
// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");
// slice off the remaining '#' in HTML5:
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}
поскольку вы контролируете действие над хэш-значением, почему бы просто не использовать токен, который означает "ничего", например "#_" или "#default".
вы можете использовать блестящий новый HTML5 window.history.pushState
и replaceState
методы, как описано в ASCIIcasts 246: состояние истории AJAX и на блог на GitHub. Это позволяет изменить весь путь (в пределах одного и того же исходного хоста), а не только фрагмент. Чтобы попробовать эту функцию,просмотр вокруг репозитория GitHub С последним браузером.
существует также другой вариант вместо использования хэша,
вы могли бы использовать javascript: void(0);
Пример: <a href="javascript:void(0);" class="open_div">Open Div</a>
Я думаю, это также зависит от того, когда вам нужна такая ссылка, поэтому вам лучше проверить следующие ссылки:
как его использовать: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ или проверьте дебаты о том, что лучше здесь:какое значение" href "следует использовать для ссылок JavaScript," # " или "javascript: void (0)"?
чтобы использовать
parent.location.hash = ''
первый
затем сделать
window.location.href=window.location.href.slice(0, -1);
поместите этот код в раздел head.
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?"));
window.history.replaceState({}, document.title, clean_uri);
}
</script>
$(document).ready(function() {
$(".lnk").click(function(e) {
e.preventDefault();
$(this).attr("href", "stripped_url_via_desired_regex");
});
});
как говорили другие, вы не можете этого сделать. Плюс... серьезно, как jQuery Ajaxy автор-я развернул полные веб - сайты ajax в течение многих лет, и я могу гарантировать, что ни один конечный пользователь никогда не жаловался или, возможно, даже не замечал, что происходит эта хеш-вещь, пользователю все равно, пока она работает, и они получают то, за чем пришли.
правильным решением является HTML5 PushState / ReplaceState / PopState ;-) который не нуждается в идентификаторе фрагмента больше: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Для совместимого проекта HTML5 и HTML4, который поддерживает эту функциональность состояния HTML5, проверьтеhttps://github.com/browserstate/History.js :-)