Удаление фрагмента по URL-адресу с помощью JavaScript w/out, вызывающего перезагрузку страницы

Фон: У меня есть 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, включая знак "#", не вызывая обновление страницы?

Ответ 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));
}

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 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)"?

Ответ 6

Поэтому используйте

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

то do

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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