Убрать hash и вернуть url без #, как?

Question

[Максим]

Как добраться до решётки я понял :
console.log(location.hash.replace(/#/g,''));
А как теперь при клике на анкор (якорь) вернуть URL без решётки (hash) ?

Я делал так но не помогло :

function init() {
    var link = document.getElementsByTagName("a");

    link.onclick = function() {
        history.pushState('', document.title, window.location.pathname);
    };
}

init();

var link = document.getElementsByTagName("a");

link.onclick = function (){
   location = location.hash.replace(/#/g,'');
}

https://ru.stackoverflow.com/q/977394/330688

Comments

[Даша Циклаури]

тебе сначала нужно отменить действие по умолчанию для ссылки
link.onclick = (e) => {e.preventDefault();}

[Максим]

Даша Циклаури, Уважаемая...если я поставлю preventDefault тогда все манипуляции в убиранием # с url не нужны , понимаете ??

[Даша Циклаури]

Максим Ленский, я не понимаю какая первоначальная задача решается? изменить href у элементов a или же открывать страницы без #

[Максим]

Даша Циклаури, Убрать # из URL при клике на анкорную ссылку ...вообще на ruSO погляньте ссылка в вопросе есть

[dollar]

Для начала надо понять, что link - это массив.
var link = document.getElementsByTagName("a");
Потому что get Elements - множественное число.
Так что link.onclick просто не имеет смысла.
Нужно link[0].onclick и link[1].onclick и так далее.

[Максим]

dollar, аа... а если ссылок 8-20 или куча их ? всё время перебирать так ? какой то алгоритм или фокус на js есть ? на php url обрезать труда не составит ...а вот на js я уже 10 лет вижу этот вопрос на всех форумах и за такие вопросы понижают карму без возврата ...а просто сказать "что убрать # из url на javascript не возможно" ни кто не пишет

[Даша Циклаури]

Максим Ленский, логика такая:
1) ты хэндлишь клик по ссылке, превентишь ее действие, читаешь ее урл (он должен быть the same domain вроде как)
2) делаешь window.history.pushState({}, '', url)

какой из этих шагов не работает? и как ты замеряешь что работает/не работает

[Максим]

Даша Циклаури, Дашенька ..золотце ..открой ruSO ПЛИЗ....почитай мой вопрос там ...этот вопрос супер баян ..но я его там выложил в полной мере ...

[Даша Циклаури]

Максим Ленский, так уже! я не пойму на каком шаге фейл? там код абсурдный

for(var i=0; i<link.length; i++){
    location = location.hash.replace(/#/g,'');
    history.pushState('', document.title, window.location.pathname);
}

например где тут используется location?

[Даша Циклаури]

если что location - это объект, а .replace возвращает строку

[Максим]

Даша Циклаури, если вы щас покажите реальный пример о том как вы убрали из адресной строки символ решётки ....к примеру по клику на ссылку <a href="#portfolio">Моё портфолио</a> браузер нас перенесёт к этому блоку но и url в адресной строке станет таким : http://site.ru/#portfolio а надо просто показать вот так : http://site.ru/portfolio как будто это папка с index.html/php не важно ТО Я ВАШ ОТВЕТ БУДУ В ПРИМЕР СТАВИТЬ

[dollar]

Даша Циклаури, в теле массива не используется ни i, ни link. Нафига перебирать?)

[Даша Циклаури]

dollar, так я и пишу код абрсурдный приведен в примере

[Максим]

dollar, мммм... наверно что бы всем ссылкам придать такое свойство ...

[dollar]

убрали из адресной строки символ решётки по клику на ссылку

Не думаю, что это вообще возможно.
Так фишинговые сайты могли бы менять URL на легитимный.

[Максим]

Даша Циклаури, абсурд ? просто якорная ссылка в ней содержить #portfolio и показать url таким : site.ru/portfolio - где абсурд то ?

[Максим]

dollar, вот это и есть ответ на вопрос ...я его пытался выциганить кучу лет ..

[dollar]

Если вам не нужны решётки на вашем сайте, так и не используйте их. Зачем вы с ними связались?

[Максим]

dollar, ааааа.....ну вот смотри ...есть куча подобных вопросов в сети ..ни здесь не на SO ruSO а во всей сети ...большенство людей используют как внутренюю навигацию от ссылки к блоку эту схему
href="#block" и сам блок с id="block" вот оттуда и вопрос "как убрать # с url"

[Даша Циклаури]

Максим Ленский, так погоди, ты считал хэш, сделал pushState() а у тебя сайт то умеет слушать изменение истории и реагировать на это? как это делают Энгуляр, Реакт

[Максим]

Даша Циклаури, просто скажите что js не умеет это ...то что react angular имеет роутинг я знаю

[dollar]

Максим Ленский, так анкоры только помогают пользователю, они ему не мешают.
А если они не нужны, то можно в onclick ссылки ставить scroll к нужному div. Вот и всё.

[Максим]

dollar, я это знаю ...набери в google yandex вопрос "как убрать решётку с url" и посмотри всего один ответ на вопрос есть ? ..

[Даша Циклаури]

Максим Ленский, ну а как тогда код работает на тостере при клике на "/q/627749#clarification_690180" допустим
window.history.pushState({}, '', '/q/627749')

[Максим]

Даша Циклаури, я не знаю ...но решётка есть и у тостера тоже ....ответ простой - на нативной js это сделать не возможно ....

[Максим]

Даша Циклаури, очевидно тостер применяет какую то плюшку типа своего роутера

[Даша Циклаури]

Максим Ленский, новые данные а тебе надо прокручивать страницу до блока с id=якорю?

[Максим]

Даша Циклаури, ну как бы да ... мы имеем вот такую структуру:

<ul>
    <li>
      <a hre="#about">Обо мне</a>
    </li>
    <li>
      <a hre="#scills">Мой опыт</a>
    </li>
    <li>
      <a hre="#portfolio">Мои работы</a>
    </li>
  </ul>
  <div id="about"></div>
  <div id="scills"></div>
  <div id="portfolio"></div>

обычный статичный лендинг на html css

[Даша Циклаури]

Максим Ленский, бля а почему это в вопросе не описать типа чуваки надо скролить до элемента?
- делай prevent
- читай href,
- ищи элемент по id
- читай offset элемента, выставляй window.scrollBy
- делай pushState() чтобы поменять url

[Максим]

Даша Циклаури, опять двадцать пять ...я умею это делать ....

[Максим]

Даша Циклаури, https://codepen.io/topicstarter/pen/pBMZzw - плиз скачай к себе и убери # с url и пришли мне обратно

[Даша Циклаури]

Максим Ленский,

<html>
  <head>
    <style>
    html,body{
  scroll-behavior: smooth
}

.item{
  height:100vh;
}

nav{
  position: fixed;
  width:100%;
}

#portfolio{
  background: #cc0;
}

#scills{
  background: #0c0;
}

#about{
  background: #c00;
}</style>
  </head>
  <body>
    <nav>
      <a href="#portfolio">Портфолио</a>
      <a href="#scills">Опыт</a>
      <a href="#about">Обо мне</a>
    </nav>
    
    <div id="portfolio" class="item"></div>
    <div id="scills" class="item"></div>
    <div id="about" class="item"></div>
    <script>
      const aClick = (e) => {
        e.preventDefault();
        const target = e.target.href.split('#')[1];
        console.log(target);
        const offsetTop = document.getElementById(target).offsetTop;
        window.scrollTo(0, offsetTop);
        window.history.pushState({}, document.title, '/'+target);
      };
      [...document.getElementsByTagName('a')].forEach(i=>{
        i.addEventListener('click', aClick);
      });
    </script>
  </body>
</html>

[Максим]

Даша Циклаури, с preventDefault и я могу

[Timur M]

Даша Циклаури, спасибо , искал как раз что нужно )

Answer 1

[Eugene Budnik]

function locationHashChanged() {
  if (location.hash) {
    var hash = location.hash.replace(/#/, '');
    history.replaceState({}, '', hash)
  }
}

window.onhashchange = locationHashChanged;

Comments

[Максим]

ого ....спасибо .... это на самом деле круто ...

Answer 2

[Robur]

a.addEventListener('click', function () {
	setTimeout(() => history.replaceState({}, '', locationWithoutHash))
})

после этого ссылка при наведении мыши вместо http://site.ru/#portfolio покажет http://site.ru/portfolio#portfolio но с этим можно жить (и даже нужно чтобы анкоры продолжали работать), зато страница проскроллится куда вам надо и в адресной строке будет http://site.ru/portfolio

Comments

[Максим]

это просто a.addEventListener сделать ?

[Максим]

https://codepen.io/topicstarter/pen/pBMZzw вот к примеру вот так выглядит ..статичная вёрстка без всяких node и react и тому подобных

[Максим]

[Robur]

Ну вы же понимаете что эта ошибка значит?
вы частично поменяли нативный код на js - меняйте уж полностью. Главное там в обработчике (строчка с setTimeout) а как его навешать - дело ваше.

[Максим]

Robur, a is not defined - вот такая штука вылазиет

[Максим]

Robur,

[Robur]

потому что a у вас not defined - все логично.
Надо определить, это обычная DOM-нода a.
Либо если вам с jQuery проще - то поменяйте код чтобы навешивать событие на click так как это положено в jQuery.
вы просто рандомно код перемешали - конечно все сломается.

[Максим]

Robur, нет ...я щас вставил именно ваш код и скриншот приложил ...выше

[Robur]

в моем коде приведен механизм как можно решить проблему с заменой #. Он рассчитан на то что вы подумаете как он работает, поймете и примените в своем коде, а не будете просто копипастить и постить ошибки со словами "не работает"

Я вам уже написал что нужно сделать чтобы исправить, но скажу более явно - используйте .click с jQuery вместо addEventListener.

[Максим]

Robur, как всегда ....