Как через javascript осуществить манипуляцию с адресной строкой?

Question

[Денис Букреев]

Такие дела.

Была у меня задача: при открытии модального окна изменять адресную строку, чтобы можно было отправить адрес другому пользователю и у него это окно открывалось.
Одновременно с этим, надо, чтобы при открытии определенного адреса не только открывалось модальное окно, но и изменялись некоторые параметры на странице - они меняются с помощью php, т.к. для шеринга надо, чтоб изначальная страница содержала в себе нужную информацию.

Решили все галимым костылем.
Изменение строки осуществляли с помощью хэшей, чтоб пользователи друг с другом делились.
А вот для php прописали обработку GET-параметров.
Убого. Так как в JS приходилось при загрузке страницы проверять и хэши и GET-параметры.

Так вот. Как можно было решить эту задачу по-другому?
Идеально: при открытии модалки адрес меняется не на /palette#c304, а на /palette/c304/ - как при ajax переходах по странице. Но я не особо шарю в том как изнутри работает SPA

Answer 1

[Kanonier8]

Как вам уже написали, для манипуляций с адресной строкой следует использовать HTML5 History API
Думаю эти первые ссылки из гугл помогут вам разобраться в вопросе.

https://habrahabr.ru/post/123106/
https://developer.mozilla.org/ru/docs/Web/API/Hist...
https://css-tricks.com/using-the-html5-history-api/

ну и еще пример с использованием history.js для динозавром
https://astrio.ru/blog/History-API/

Comments

[Денис Букреев]

я сначала почитал первые ссылки из гугла перед тем как задавать вопрос
но не особо понял тему, решил тут спросить, мб кто жеванет или что другое скажет

видимо придется углубляться туда)
спасибо

[Kanonier8]

Ну на самом деле обработке клика открытия модального окна, вы например можете установить значение url так
history.pushState(null, null, '/palette/c304/')
ну а при закрытии так
history.pushState(null, null, '')

Далее при загрузке страницы вы можете парсить url типа location.pathname.split('/'), достать из массива нужный элемент и в зависимости от его значения показать, то или иное модальное окно.

Да и вообще можете погуглить, готовый pure js router коих немало найдется. Все уже давно решили до нас

Answer 2

[Archakov Dennis]

javascript location pushstate. У меня сайт асинхронный, вот и этим способом и делал смену ссылки в адресной строке

Comments

[Денис Букреев]

погляжу что за зверь, но мне интересно именно то, как оно в коде реализуется

[Archakov Dennis]

Денис Букреев: так иначе никак не сделаешь, только pushstate'ом

Answer 3

[frees2]

Так у меня уже лет шесть работает, только не локацион.... Надо еще правильно в .htaccess тоже прописать релоад. ........

<span onclick="player.loadVideoById(\''.$videoId.'\', 0);history.pushState(\''.$videoId.'\', null, \''.$videoId.'\');document.title = \''.$title3.'\';return false">&#9668; &nbsp;&nbsp; <img src="'.$thumbnails.'" align="right" hspace=" 4px" width="60" height="47" > &nbsp;&nbsp;'.$title.'</span>  <br> <button type="submit" name="message" value="'.$title.',live5" style="border: 0; cursor: pointer;  background: transparent">

Comments

[Archakov Dennis]

О, боже...