Удалить фрагмент в URL с JavaScript без перезагрузки страницы

Справочная информация: у меня есть HTML-страница, которая позволяет вам расширять определенный контент. Поскольку для такого расширения необходимо загружать только небольшие части страницы, это делается с помощью JavaScript, а не путем направления на новую страницу URL/ HTML. Тем не менее, в качестве бонуса пользователь может пермалинк к таким расширенным разделам, т. е. отправить кому-то еще URL, как

http://example.com/#foobar

и открыть категорию" foobar" немедленно для этого другого пользователя. Это работает с помощью родителей.местоположение.hash = 'foobar', так что эта часть в порядке.

Теперь вопрос: когда пользователь закрывает такую категорию на странице, Я хочу снова очистить фрагмент URL, т. е. включить http://example.com/#foobar в http://example.com/ для обновления дисплея permalink. Однако, делая это с помощью parent.location.hash = '' вызывает перезагрузку всей страницы (например, в Firefox 3), чего я хотел бы избежать. Используя window.location.href = '/#' не запускает перезагрузку страницы, но оставляет несколько некрасивый знак "#" в URL-адресе. Итак, есть ли способ в популярных браузерах JavaScript-удалить привязку URL, включая знак"#", не вызывая обновления страницы?

38
fragment-identifier html 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));
}
42

поскольку вы контролируете действие над хэш-значением, почему бы просто не использовать токен, который означает "ничего", например "#_" или "#default".

14

Извините, но ответ-нет, если опорожнение местоположения.хэш не выполняет задачу !-)

7

вы можете использовать блестящий новый HTML5 window.history.pushState и replaceState методы, как описано в ASCIIcasts 246: состояние истории AJAX и на блог на GitHub. Это позволяет изменить весь путь (в пределах одного и того же исходного хоста), а не только фрагмент. Чтобы попробовать эту функцию,просмотр вокруг репозитория GitHub С последним браузером.

4

существует также другой вариант вместо использования хэша, вы могли бы использовать 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)"?

1

чтобы использовать

parent.location.hash = '' первый

затем сделать

window.location.href=window.location.href.slice(0, -1);
0

поместите этот код в раздел 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>
0
$(document).ready(function() {
        $(".lnk").click(function(e) {
            e.preventDefault();
            $(this).attr("href", "stripped_url_via_desired_regex");
        });
    });
-1

как говорили другие, вы не можете этого сделать. Плюс... серьезно, как 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 :-)

-2