Блог

Главная - Вопросы по программированию - Как скрыть идентификатор в URL после щелчка по ссылке?

Как скрыть идентификатор в URL после щелчка по ссылке?

#javascript #html

#javascript #HTML

Вопрос:

Если вы нажмете на ссылку, вы увидите идентификатор div в своем URL. Как это можно скрыть?

 #one {
  margin-top: 100%;
  width: 50px;
  height: 50px;
  background-color: red;
}  
 <a href="#one">Link</a>

<div id="one"></div>

Был бы очень благодарен за помощь!

Комментарии:

1. Почему вы хотите это скрыть? Функция фрагментации URI полезна для пользователей.

2. @Dai У меня есть скрытые элементы. И если кто-то получает ссылку из скрытого элемента, это не имеет никакого смысла.

Ответ №1:

Добавьте прослушиватель событий для hashchange , а затем задайте URL с помощью window.history.pushState 

 window.addEventListener("hashchange", () => window.history.pushState({}, "", '/'), {});  
 #one {
  margin-top: 100%;
  width: 50px;
  height: 50px;
  background-color: red;
}  
 <a href="#one">Link</a>
<div id="one"></div>

Рабочий пример здесь: https://hashchange-pushstate .lcherone.repl.co

Ответ №2:

Вы можете прослушивать изменения в хэше окна с помощью

window.addEventListener("hashchange", () => {}, false);

Затем обновите URL с помощью

window.history.pushState();

Итак, вы бы сделали

 function hashHandler() {
    const loc = window.location.hash.split('#')[1];
    window.history.pushState({}, 'Page Title', '/'   loc);
}

window.addEventListener('hashchange', hashHandler, false);

Обратите внимание, что это работает только в Chrome / FF / IE 10 . Подробнее об этом можно прочитать здесь