Вход

Просмотр полной версии : Убрать хеш из адресной строки


avalan4e
04.07.2016, 17:17
Проблема в том, что код выполняется перед тем, как происходит переход по хешу. В результате чего этот самый хеш добавляется в адресную строку. А нужно изменить адресную строку на нужный вид без добавления хеша. Причём страницу не перезагружать, иначе можно было бы просто правкой htaccess обойтись. Бьюсь со вчерашнего дня над этой задачей. Буду рад помощи.
<a href="#href" name="name" onclick="f()">alias</a>
<a name="href">redirect</a>
<script type="text/javascript">
function f() {
var redirect = '/url/';
history.pushState('', '', redirect);
}
</script>

Viral
04.07.2016, 18:15
Как-то так (https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault)

laimas
04.07.2016, 18:25
можно было бы просто правкой htaccess обойтись

Каким образом, если хеш на сервер не передается?

avalan4e
04.07.2016, 19:02
ОК. Я думал можно что-то типа такого записать:
<a href="href">
RewriteRule ^.*(href)$ changeURL.php\#$1 [L]
Но нет, действительно, так не работает.

avalan4e
04.07.2016, 19:14
В таком случае не происходит перехода по хешу. А мне нужно, чтобы он произошел, а затем поменять url на необходимый.

рони
04.07.2016, 20:46
avalan4e,
<a href="#href" name="name" onclick="f(event,this)">alias</a>
<a name="href">redirect</a>
<script type="text/javascript">
function f(event, link) {
event.preventDefault();
link = link.getAttribute('href').replace(/#/g, '');
document.querySelector('[name="'+link+'"]').scrollIntoView();
var redirect = '/url/';
history.pushState('', '', redirect)
}
</script>

Vlasenko Fedor
04.07.2016, 22:06
рони, :)
onhashchange (https://developer.mozilla.org/ru/docs/Web/API/WindowEventHandlers/onhashchange)

рони
04.07.2016, 22:29
Poznakomlus,
не понял.

Vlasenko Fedor
04.07.2016, 22:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#test">Test</a>
<script>
window.onhashchange = function () {
console.log(location.hash);
history.pushState('', '', '/url/');
alert(location.hash === '');
};
</script>
</body>
</html>

рони
04.07.2016, 23:13
Poznakomlus,
не понимаю чем это может помочь, запись хеша уже произошла, если конечно история не нужна, тогда только.

Vlasenko Fedor
04.07.2016, 23:18
показываю, что событие не на click стоит вешать, а на изменение хеша

рони
04.07.2016, 23:24
Poznakomlus,
:-? ок если нужна только ссылка, если важно вернутся назад в нужное место, тогда код не рабочий или я чего-то не понимаю.

Vlasenko Fedor
04.07.2016, 23:33
если важно вернутся назад в нужное место
этo я уже с ваших примеров копипастил изменение истории
есть специальное событие по работе с хешами
если мы работаем с хешами то логичнее его использовать
я же показал как определяется хеш и как при изменении истории он затирается

рони
04.07.2016, 23:48
Poznakomlus,
тогда может history.pushState заменить на history.replaceState в вашем коде?

Vlasenko Fedor
05.07.2016, 00:04
в вашем коде
я уже с ваших примеров копипастил
код не мой копипаст
я только про обработчик событий говорю как навешивать, внутренняя реализация это уже к разработчику, что ему надо и как вести историю
ведь здесь же нет проверки поддерживает ли броузер историю вообще, если докапываться

laimas
05.07.2016, 12:03
Но нет, действительно, так не работает.

Хеш, это навигация внутри страницы, то есть только на клиенте и браузер на сервер его не передает.

avalan4e
05.07.2016, 12:28
Poznakomlus,
рони,
Благодарю от всей души. Всё работает как часики.
Вот так теперь выглядит мой код для обработки события перехода по хешу:
<script type="text/javascript">
window.onhashchange = function () {
console.log(location.hash);
history.replaceState('', '', '/url');
};
</script>
А как теперь сделать то же самое при переходе по якорю с другой страницы? window.onload делает это до перехода по хешу. В результате правильная строка при бесполезном переходе.

avalan4e
05.07.2016, 12:35
Хеш, это навигация внутри страницы, то есть только на клиенте и браузер на сервер его не передает.
Да, я уже разобрался, благодарю.

avalan4e
06.07.2016, 13:05
Уважаемые форумчане, проблема не решается обращением к моим знаниям js и спекулятивному шаманству с бубном в этой области. Повторяю свой вопрос: как убрать хеш из адресной строки при переходе с другой страницы по ссылке типа: <a href="url#hash"> Проблема в том, что событие hashchange не происходит, а навешивание изменения ссылки при загрузке окна приводит к тому, что переход осуществляется уже по этой изменённой ссылке. Надеюсь на вашу отзывчивость, т. к. безрезультатно часами застреваю над этой задачей.

рони
06.07.2016, 15:02
avalan4e,
убрал ... может так попробовать пока знатоки не откликнулись.
<script type="text/javascript">
window.onload = function () {
location.hash && window.setTimeout(function() {
history.replaceState('', '', '/url');
},300)
};
</script>

avalan4e
06.07.2016, 15:09
рони,
Отлично! Цель достигнута. У меня такая же идея была где-то на периферии сознания, но не успел добраться. Благодарю за помощь.

warren buffet
08.07.2016, 18:07
Кто знает зачем ждать онлоад и еще 0.3 сек для редиректа?

avalan4e
10.07.2016, 02:38
warren buffet,
Насколько я понимаю, 0.3 секунды нужны для того, чтобы скрипт сработал после того, как произойдёт переход по хешу. Собственно сам onload слушается с целью попасть куда нужно при переходе по ссылке с учётом хеша с другой страницы. И поскольку событие обрабатывается и затирает адрес как только загружается страница, то нужного перехода не удаётся добиться без задержки. И вот этот момент мне самому интересно прояснить, а именно: как так получается, что на полностью загруженную страницу (после чего и срабатывает скрипт) не распространяется якорный переход?

warren buffet
10.07.2016, 23:40
"Переход по хешу" это прокрутка страницы до элемента с id==hash если таковой имеется. А редирект сработает мгновенно. Закомпостировали моск друг другу.