-1

Check out this link:

http://www.mensfitness.com/nutrition/what-to-eat/top-10-energy-boosting-foods-and-drinks/slide/8

Notice that when you click the forward or back buttons on the slideshow, the url changes, and there is no # sign in it either.

Upon inspecting the Network tab, it is revealed that only a jpeg request is completed successfully, so it is something from the client. However, I've read in the following answers that this can only be done using a # sign in the url:

jquery: change the URL address without redirecting?

Any way to change the header URL without reloading?

And I've also used the Wappalyzer extension for chrome to detect any javascript libraries they're using, and it shows only jQuery.

Any ideas on how they do it? And can you please explain the method you used to analyze the behaviour?

Community
  • 1
  • 1
Hassaan
  • 253
  • 4
  • 13

1 Answers1

1

It's a feature of the history API. You can call history.pushState or history.replaceState (used for your example) to change the url without requesting a new page from the server. To handle the back button you would use window.addEventListener('popstate'...).

There's a nice write-up here: https://css-tricks.com/using-the-html5-history-api/

Older browsers don't support this feature so you're probably best to use a polyfill. The following javascript library will use the proper urls in modern browsers and hash endings when the history API isn't supported: https://github.com/browserstate/history.js

Good luck.

eeun
  • 333
  • 1
  • 5