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

Question

I know about setting and getting URL parameters, e.g. 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. E.g. example.com/index.html/foo/bar/hello.

How can I accomplish this? In particular,

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?
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.

Would probably make more sense if the path after index.html was a url hash value .... example.com/index.html#/foo/bar/hello. Server would only know index.html and your front end could parse the hash to do whatever is needed from location.hash — charlietfl
– charlietfl, Commented Jun 28, 2020 at 1:19
Alternative is you need server side to manage sending the index.html when those other path parts exist. Not known what stack you use on server — charlietfl
– charlietfl, Commented Jun 28, 2020 at 1:24
So I've found that History.pushstate can accomplish this with window.history.pushState({x: "foo", y: "bar", z: "hello"}, "", "/foo/bar/hello"), with navigation working fine and everything. The only thing is that directly entering the url example.com/index.html/foo/bar/hello won't work properly. You're saying the only way the URL could work properly is messing with the server side, then? — chausies
– chausies, Commented Jun 28, 2020 at 1:38

Mahmoud Atwa · Accepted Answer · 2020-06-28 01:47:58Z

1

There's 2 scenarios you should handle.

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.
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.

edited Jun 28, 2020 at 1:47

answered Jun 28, 2020 at 1:42

Mahmoud Atwa

1151 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related