How to Detect Back button click

Question

I am working on an HTML website where I have 4 divs in an index.html page.

Earlier on clicking the div section used to expand it and the other section became smaller in width.

Then the client asked to make sure that the URL was changed when we click any of the div.

Suppose we click the div called test . The page url shoul become /test.html, without the page reloading. I have implemented this functionality using the history API.

Now when I click on the test div and the url becomes /test.html and then if I click a link, it redirects to another page.

From this page, if I click on the browser back button, then it takes me to /test.html which does not exist and we get a 404 error.

I tried making a redirection page called test.html which redirects back to the index.html page, but we get a blink while doing so.

What I want to ask is whether there is a solution for this problem?

Answer 1

If you have mod_rewrite enabled on the web server, you could set this up as a URL rewrite rule.

RewriteEngine On
RewriteRule ^test.html originalfile.html [NC]

This will redirect test.html to the original html file when the user presses the back button and navigates to test.html while the browser address bar still displays test.html . From here, you should be able to detect the address in javascript and display the appropriate div .

(Note that you will probably need to modify the above rewrite rules depending on how your server is configured. For more information about creating rewrite rules, see this link .