How to manipulate address bar with javascript?

Question

JavaScript

So it goes.
I had a task: when opening a modal window, change the address bar so that you can send the address to another user and this window opens for him.
At the same time, it is necessary that when a certain address is opened, not only a modal window opens, but also some parameters on the page change - they are changed using php, because. for sharing, it is necessary that the initial page contains the necessary information.
We decided everything with a crutch.
The line was changed using hashes so that users could share with each other.
But for php, the processing of GET parameters was prescribed.
Wretched. Since in JS it was necessary to check both hashes and GET parameters when loading the page.
So. How could this problem have been solved differently?
Ideal: when you open a modal, the address changes not to /palette#c304, but to /palette/c304/- as with ajax page transitions. But I don’t really know how SPA works from the inside.

Answer 1

As you already wrote, you should use the HTML5 History API to manipulate the address bar
. I think these first links from Google will help you understand the issue.
https://habrahabr.ru/post/123106/
https://developer.mozilla.org/ru/docs/Web/API/Hist...
https://css-tricks.com/using-the-html5- history-api/
well, and another example using history.js for a dinosaur
https://astrio.ru/blog/History-API/

Answer 2

Так у меня уже лет шесть работает, только не локацион.... Надо еще правильно в .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">