How to use the URL filepath as parameters in plain html/javascript?

Question

I know about setting and getting URL parameters, eg example.com/index.html?x=foo&y=bar&z=hello would give your javascript access to the x , y , and z variables specified in the URL.

What I wish for is the same behavior but utilizing the file path part of the URL. Eg example.com/index.html/foo/bar/hello .

How can I accomplish this? In particular,

1. How can I make sure the browser knows to go to index.html even though the file path index.html/foo/bar/hello was specified?
2. How can I update the URL to example.com/index.html/foo/bar/world , such that if I press "Back" on the browser, it will go back to example.com/index.html/foo/bar/hello .

Furthermore, I'd heavily prefer if the solution was in pure javascript/html, without reliance on jquery or any other libraries.

Answer 1

There's 2 scenarios you should handle.

1. What if the user is on a foreign page and wants to visit your page using the link example.com/index.html/foo/bar? This should be handled on the server not on the client side.
2. If the user is already on some page, say example.com/index.html and wants to go to example.com/index.html/foo/bar, you may use the pushState method. You may look at https://developer.mozilla.org/en-US/docs/Web/API/History/pushState to change the current URL & and this https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate to do something when the user presses the back button.