2008-11-06 5 views
38

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

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, включая знак «#», не вызывая обновление страницы?

+0

Это [связанный вопрос] (http://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for) является интересным для чтения , – 2011-05-23 09:42:27

ответ

40

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

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

+0

Неужели это правда? – 2011-06-21 09:18:27

+0

Этот ответ требует удаления. Это просто неправильно и имеет больше голосов, чем хотя бы один правильный ответ. – atomless 2015-11-26 13:11:01

14

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

+1

Я думаю, что это идея, достойная рассмотрения. – 2008-11-06 16:55:49

+1

Да, вы также можете использовать пустой якорь, поэтому URL-адрес заканчивается как http://example.com/#. Это почти идеально, но я думаю, что это тоже может показаться немного запутанным для некоторых посетителей. В идеале, не было бы даже того, что хэш-символ показывает ... – 2008-11-07 13:06:42

+0

Очевидно. Ваши скрипты должны функционировать без ничего в хэше. – 2009-05-05 10:55:03

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

Спасибо, Флорин, не могли бы вы объяснить, что делает этот код? – 2008-11-07 13:05:43

0

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

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

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

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

Существует и другой вариант, вместо того, чтобы использовать хэш, можно использовать 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/ или проверить дебаты о том, что лучше здесь: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

-2

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

4

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

0

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

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