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

Question

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

.

http://example.com/#foobar

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

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

Answer 1

Как уже упоминали другие, 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));
}

Answer 2

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

Answer 3

Извините, но ответ - нет, если очистка location.hash не выполняет задачу! -)

Answer 4

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

Answer 5

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

Answer 6

Поместите этот код в головной раздел.

<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>

Answer 7

Как уже говорили другие, вы не можете этого сделать. Плюс ... серьезно, как автор jQuery Ajaxy - я уже много лет разворачиваю полноценные веб-сайты ajax - и я могу гарантировать, что ни один конечный пользователь никогда не жаловался и, возможно, даже не заметил, что существует такая вещь продолжая, пользователю все равно, пока он работает и получает то, за что пришел.

Хотя правильным решением является HTML5 PushState / ReplaceState / PopState ;-), которому больше не нужен идентификатор fragement: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Для проекта, совместимого с HTML5 и HTML4, который поддерживает эту функциональность состояния HTML5, проверьте https://github.com/browserstate/History.js: -)

Answer 8

Так что используйте

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

тогда делай

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

Answer 9

$(document).ready(function() {
        $(".lnk").click(function(e) {
            e.preventDefault();
            $(this).attr("href", "stripped_url_via_desired_regex");
        });
    });