Как очистить Hashtag от URL-адреса на странице Load

Question

Если я пришлю кому-нибудь ссылку http://example.com/#about, как я могу очистить хэштег и текст из URL-адреса на странице загрузки http://example.com.

Я создал лайтбоксы, которые используют атрибут CSS :target. Мне бы хотелось, чтобы кто-то отправил или щелкнул ссылку с хэштегом и текстом, добавленным к URL-адресу, что страница по сути игнорирует его или очищает его от URL-адреса при загрузке.

Я думал, что это будет довольно распространенная проблема с простым ответом, но я не столкнулся ни с чем в своих исследованиях. Я открыт для ответов, которые включают JavaScript & jQuery.

Answer 1

Если вы не возражаете хэштегом присутствует, но пустой, вы можете использовать:

document.location.hash = ''; 

Что изменится http://example.com/#about к http://example.com/# без перезагрузки страницы, а также имеет более высокую обратную совместимость, чем history.pushState.

Вы можете использовать его, убедившись, что всплывающее окно или что-то еще загружено должным образом, просто назовите эту строку так, как она есть, и она будет работать.

Answer 2

использование history.pushState, который не перезагрузить страницу или оставить задний #: -

history.pushState('', '', window.location.pathname); 

PushState() принимает три параметра: состояние объекта, название (которое в настоящее время игнорируется), и (необязательно) URL.

URL - URL этого URL-адреса новой истории задается этим параметром. Обратите внимание, что браузер не будет пытаться загрузить этот URL-адрес после вызова pushState(), но он может попытаться загрузить URL-адрес позже, например после того, как пользователь перезапустит браузер. Новый URL не обязательно должен быть абсолютным; если он относительный, он разрешен относительно текущего URL-адреса. Новый URL-адрес должен совпадать с текущим URL-адресом; иначе pushState() выдает исключение. Этот параметр является необязательным; если он не указан , он настроен на текущий URL документа.

В некотором смысле вызов pushState() аналогичен настройке window.location = "#foo", поскольку оба будут также создавать и активировать другую запись истории, связанную с текущим документом. Но pushState() имеет несколько преимуществ :

Новый URL-адрес может быть любым URL-адресом того же происхождения, что и текущий URL-адрес. В контраст, установка window.location хранит вас в том же документе только , если вы изменяете только хэш.

Answer 3

window.location.hash = '';//remove hash text 
window.location.href.replace('#', '');//remove hash 
history.replaceState(null, null, window.location.href);//replace state 

Answer 4

Я не могу комментировать, но добавить к ответу Бэнг, в тех, кто не хочет их посетителей, чтобы иметь дополнительный шаг в их истории следует использовать history.replaceState(null, null, window.location.pathname).

Если вы используете pushState, ваш посетитель ударит обратно и перенесется в состояние/хэш, который вы удалили из URL-адреса, что может привести к снижению общей удовлетворенности посетителей.

EDIT: Кроме того, в случае использования в ФП, я бы убедиться, что вы связываете любые popstate или hashchange функции после вы изменили объект History (например, любые анимированные scrollTo «с или этажерки).