Как отменить :target после перезагрузки страницы?

Question

[Саша]

Здравствуйте.
При использовании :target столкнулся с багом:
При отрабатывании события :target на элементе оно остается после перезагрузки страницы.

Пример бага не удалось реализовать на кодпене либо фиддле.
CSS выглядит так

#el-target01:target ~ a{
	color:red;
}
#el-target02:target ~ a{
	color:green;
}

То есть по сути при активной секции меняется цвет у ссылки.
Баг заключается в том, что при перезагрузке страницы секция остается активной.
Проблема в кэше?

Подскажите пожалуйста, как можно править данный баг?
Спасибо!

Answer 1

[Николай]

У вас скорее всего при нажатии на ссылку в url попадает фрагмент с хешом. И после перезагрузки так и остаётся этот фрагмент в url.

Comments

[Саша]

Николай url чищу от #и-всего-что-тут, проблема остается.
Нужно как то именно сам :target отменять

[Николай]

Я тут немного погуглил и нашел вот такое: https://bugs.webkit.org/show_bug.cgi?id=83490. Т.е. изменение хэша кодом не меняет таргет.
Я тут вообще подумал - это же логично, нет? Можете описать юзкейс, при котором после обновления страницы должны чиститься хеши?

[Саша]

Николай: да, в точку!
Юзкейс самый простой, просто перезагрузка страницы.

[Николай]

Саша: просто тогда как вы плпнируете отличать перезагрузку страницы от того, что кто-то прешел по ссылке имеющей хэш-фрагмент? Пр перезагрузке можно в beforeunload событие засунуть чистилку url, должно работать

[Саша]

Николай: можно подробней о beforeunload ?

Где у меня ошибка?

window.addEventListener('beforeunload', function(event){
	history.pushState('', document.title, window.location.pathname);
});

[Николай]

Саша: The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.
Может в этом проблема? Попробуйте абсолютный url использовать.

[Саша]

Николай: Не совсем понял..

Дело в том, что такая запись удаляет якорь из url:

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

А такая не работает:

window.addEventListener('beforeunload', function(event){
	history.pushState('', document.title, window.location.pathname);
});

Answer 2

[Пётр Попов]

Можно попробовать такой код при загрузке страницы:
window.location.hash = '';

Он отбросит всё, что перед # в командной строке. Должно сработать. В любом случае надо искать решение через JS. Можно в History API покопать. Вот например хорошая статья.

Comments

[Ivanq]

History, а не Histori

[Пётр Попов]

Пардон, исправил

[Саша]

Пётр Попов: Спасибо, но это лишь чистит адресную строку, а проблема остается.